Making sure footer image does not repeat itself in Debut

Store Design
1

Hi I have added a footer image by inserting this code in footer.liquid:

background: url({{ ‘asset.png’ | asset_url }});

I tried to make it not repeat by putting this code in theme.liquid:

.site-footer {

background-size: cover;

background-repeat: no-repeat;

background-position: center;

}

but it is not working- any ideas?

website : www.rainbowbridge.love

2

Hi @Gratitude11

Your CSS lines should work but the fact that your image is added inline which is I think footer.liquid section and the CSS you’re adding are in theme.css.

So, the CSS itself produced when you add background-image means it contains background-size, b-position, b-repeat etc.

Any inline CSS added will work first all the time.

Now, you can overturn that by adding a parent ID or CLASS before .site-footer like .xyz .site-footer and that will over-write inline .site-footer CSS.

Your solution is replace .site-footer css in theme.css from below CSS

#shopify-section-footer .site-footer {
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
}
3

Thank you! So in the future - what should I do - where should I put all of the appropriate codes?