Solved

How to add background image in footer? Refresh theme.

jhis
Tourist
8 0 2

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/

Accepted Solution (1)
theycallmemakka
Shopify Partner
1477 336 360

This is an 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>

Buy me a Coffee


Enjoy Shopify for $1. Sign up now


For quick response - Message Me


Ping me at: theycallmemakka@gmail.com

View solution in original post

Replies 7 (7)

PageFly-Henry
Astronaut
1069 306 260

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.

PageFlyHenry_0-1714141903860.png

 



Hope that my solution works for you.

Best regards,

Henry | PageFly

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

jhis
Tourist
8 0 2

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

jhis
Tourist
8 0 2

Screenshot (339).png

it's showing like this after coding.

theycallmemakka
Shopify Partner
1477 336 360

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

Buy me a Coffee


Enjoy Shopify for $1. Sign up now


For quick response - Message Me


Ping me at: theycallmemakka@gmail.com

jhis
Tourist
8 0 2

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
Shopify Partner
1477 336 360

This is an 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>

Buy me a Coffee


Enjoy Shopify for $1. Sign up now


For quick response - Message Me


Ping me at: theycallmemakka@gmail.com

jhis
Tourist
8 0 2

Thank you so much. It worked!