How to add background image in footer? Refresh theme.

[jhis]

Hello, could you please help me add background image in the footer.

I want the image to be compatible to both desktop and mobile.

This is my website- https://jaihoindiastore.com/

[PageFly-Henry]

Hi @jhis 

This is Henry from PageFly - Landing Page Builder App

You can try this code by following these steps: 

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file base.css

Step 3: Paste the below code at bottom of the file -> Save

footer {

    background-image: url(https://jaihoindiastore.com/cdn/shop/files/817bPT9I_nL._SX522_-removebg-preview.png?v=1711951573&wid...) !important;

    object-fit: contain !important;

    background-size: cover !important;

    background-position: center !important;

    background-repeat: no-repeat !important;

    background-attachment: unset !important;

    height: 50vw !important;

}

You can search for any image URL you want and replace the example video URL in my code.

In addition, I think you should also add a banner to the first section on the home page so that users can identify the style and goals of your store.

Hope that my solution works for you.

Best regards,

Henry | PageFly

[jhis]

Thanks for your reply Henry but the code didn't work 😞

[jhis]

it's showing like this after coding.

[theycallmemakka]

Hi @jhis 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file
4) Add the following code just above tag </body>

<style>
footer {
    background-image: url(https://jaihoindiastore.com/cdn/shop/t/4/assets/499130488590435558-16b57035-485e-40c9-aa8c-b7bbdf4a9268.png) !important;
    object-fit: contain !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-attachment: unset !important;
}
</style>

If you require further help to optimize your store, please don’t hesitate to reach out. If you find this information useful, a Like would be greatly appreciated. And if this solves the problem, please Mark it as Solution!

Best Regards,
Makka

[jhis]

Hey, thank you so much. It worked for desktop but not for mobile. I can't see the background image on mobile. Is there anyway we can achieve that?

[theycallmemakka · Accepted solution]

Can you try replacing the previous code with this updated code

<style>

footer {
    background-image: url(https://jaihoindiastore.com/cdn/shop/t/4/assets/499130488590435558-16b57035-485e-40c9-aa8c-b7bbdf4a9268.png) !important;
    object-fit: contain !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-attachment: unset !important;
}
@media only screen and (max-width: 600px) {
  footer.footer.gradient{
        background-image: url(https://cdn.shopify.com/s/files/1/0587/9008/4698/files/final.png?v=1714147003)!important;
        object-fit: contain!important;
        background-size: contain!important;
        background-position: center !important;
        background-repeat: no-repeat !important;
        background-attachment: unset !important;
    }
}
</style>

[jhis]

Thank you so much. It worked!