How can I prevent a footer background image from repeating?

Store Design
1

Hi, I added a background image to footer with code

.site-footer {
background-image: url(https://cdn.shopify.com/s/files/1/0565/7431/2643/files/background.jpg?v=1641291483);
background-color: unset;
position: relative;
}

The image is loading but it’s repeating itself and doesn’t look nice, how can I make it that is just one image and not the same image repeating as tiles? does it need to be a specific size? or is the position: relative what I need to change?

Thanks for your help

Website https://ruky-int.myshopify.com/

pass baflaw

2

Hi @urbantis

To adjust the footer image size, add this code to your theme.css file.

Navigate to online store >> Click edit theme code.

Now find theme.css and paste the following code

.site-footer {
    background-size: cover !important;
}

After adding this it will be showing like this

Screenshot_9.png
Screenshot_9.png1906×538 142 KB

I hope it will be helpful for you.

Thanks

Did it solve your issue?

- If yes, Like & Mark As Solution to help the community

- If not, let me know. also share a screenshot of the code that you added.

3

@urbantis

Please add this two things with it

background-repeat: no-repeat;

background-size: cover;

.site-footer {
background-image: url(https://cdn.shopify.com/s/files/1/0565/7431/2643/files/background.jpg?v=1641291483);
background-color: unset;
position: relative;
background-repeat: no-repeat;
background-size: cover;
}

If helpful then please Like and Accept Solution. Want to modify or custom changes on store Hire me. Feel free to contact me on shopify.dev.34@gmail.com | Shopify Design Changes | Custom Modifications In to Shopify Theme