Solved

How to stop footer image from repeating in Dawn theme?

victelen
Visitor
2 0 2

I have added a footer image in my footer following the instructions from below.  

 

https://community.shopify.com/c/technical-q-a/add-footer-background-image-to-dawn-theme/m-p/1328300#...

 

However the no image repeat thing isn't working, it either wipes the picture out completely which is the case right now or it repeats the image. (www.meanmotherscreations.com

 

.footer {
border-top: 0.1rem solid rgba(var(--color-foreground), 0.08);
background-image: url("footpic2.png");
background-repeat: no-repeat;
}

 

I have tried also 

 

.footer {
border-top: 0.1rem solid rgba(var(--color-foreground), 0.08);
background-image: url("footpic2.png");

}
background-repeat: no-repeat;
}

 

neither work, please help, 

also how would i change the sizes if need be? 

Accepted Solution (1)

Hamza_Hussain
Shopify Partner
37 3 7

This is an accepted solution.

I added some CSS you can check if this what you want

 

 

.footer {


background-image: url(footpic2.png);

background-repeat: no-repeat;

background-position: center;

background-attachment: inherit !important;

background-size: cover;

}

 

 
below is the result 
Honey88_0-1702303702601.png

 

Honey G Hamza

View solution in original post

Replies 3 (3)

Hamza_Hussain
Shopify Partner
37 3 7

This is an accepted solution.

I added some CSS you can check if this what you want

 

 

.footer {


background-image: url(footpic2.png);

background-repeat: no-repeat;

background-position: center;

background-attachment: inherit !important;

background-size: cover;

}

 

 
below is the result 
Honey88_0-1702303702601.png

 

Honey G Hamza
victelen
Visitor
2 0 2

thank you so much 

Made4uo-Ribe
Shopify Partner
6076 1461 1799

Hi @victelen 

Can you explain more what are you trying to achieve? So you like all the footer will be background on this image? Or only the navigation only? And also the no-repeat seems working. 

This is your current footer. 

Made4uoRibe_0-1702303621829.png

If you take out the no-repeat it would be like this. 

Made4uoRibe_1-1702303652979.png

If you like all the area of the footer you must select the selector which can cover them all. 

Try to use this selector. 

 

footer.footer.color-accent-1.gradient.section-sections--14747334803574__footer-padding {background: url(footpic2.png);}

 

And Save. 

If you like only the navigation footer. check this one. 

 

.footer__blocks-wrapper.grid.grid--1-col.grid--2-col.grid--4-col-tablet {
    background: url(footpic2.png);
}

 

And Save. 

 

 

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
For FREE, premium codes, and trusted, knowledgeable Shopify developers, visit us at

Made4uo.com