How can I adjust the text image for mobile view on my website?

Shopify Discussion

Topic summary

A user is experiencing an issue where a background image behind text is not displaying correctly on mobile devices for their Shopify store (elitefitclo.com).

Current Status:

  • Another user reports they cannot see the image anymore, suggesting it may have been removed.
  • Two solutions have been proposed involving custom CSS code.

Proposed Solutions:

  1. Add custom code to the theme.liquid file (bottom of file, above closing body tag)
  2. Add CSS media query to Base.css file targeting mobile screens (max-width: 745px) to set background image properties for the banner element

The CSS solution specifically targets the .banner__box element and sets:

  • Background image URL
  • Background repeat: no-repeat
  • Background size: cover

Both solutions require accessing the Shopify theme code editor. The discussion remains open with no confirmation whether either solution resolved the issue.

Summarized with AI on November 14. AI used: claude-sonnet-4-5-20250929.
1

Hi,

Can someone look up how to make the image behind the text in Mobile View

Here is my website https://elitefitclo.com/

Screenshot 2023-11-28 084637.png
Screenshot 2023-11-28 084637.png662×879 159 KB

2

Have you removed the image? I can’t see it any more.

3

hi, @EliteFit

Go to Online Store
2) Edit Code
3) Find theme.liquid file

  1. Add the following code in the bottom of the file above tag.

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

4

Hi @Gustavo1105 ,
This is Theodore from PageFly - Shopify Page Builder App.
For solving the problem about the Image Banner Mobile, let’s try this solution:
Online Store ->Theme ->Edit code
Assets ->Base.css

@media screen and (max-width: 745px) {
 .banner__box.content-container.content-container--full-width-mobile.color-background-1.gradient {
    background-image: url(https://elitefitclo.com/cdn/shop/files/textile-yarn-weaving.jpg?v=1700579618&width=1100);
    background-repeat: no-repeat !important;
    background-size: cover !important;
}
}

I’ll be so happy if my suggestion can help to solve your problem. If you have any further questions, please feel free to tell me.
Best regards,
Theodore | PageFly