header image not showing on mobile

Shopify Discussion

Topic summary

A Shopify store owner successfully added a header background image via CSS, but it only displays on desktop devices, not mobile.

Root Cause:
The existing CSS uses @media screen and (min-width: 990px), which restricts the image to screens 990px or wider—excluding mobile devices.

Solutions Provided:

  • Add a mobile-specific media query (@media screen and (max-width: 989px) or max-width: 767px) to the base.css file with the same background image URL
  • Adjust background-size to cover and add background-position: center for better mobile display
  • Alternative: Insert the CSS code in theme.liquid within <style> tags

Resolution:
The original poster resolved the issue by adding the code through the theme customizer’s custom CSS section under the header settings, rather than directly editing base.css.

Multiple responders provided similar solutions with slight variations in media query breakpoints and implementation methods.

Summarized with AI on October 29. AI used: claude-sonnet-4-5-20250929.
1

Hello!

A colleague has successfully added code to our company site through assets/base css to add an image to our header, however it is not showing on mobile.

I am not technically gifted at all, so I was wondering if someone can guide me to ensure the image shows on the mobile version too?

I have gone into the base css code, and it is over 3000 lines long, however I have copied and pasted what I think this is the relevant part below:

}
@media screen and (min-width: 990px) {
header.header {
background: url(“https://cdn.shopify.com/s/files/1/0922/7645/7736/files/0X9A7235.jpg?v=1740069248”) no-repeat;
background-size: 100%;
}

}

Can anyone please help?

Our site is: https://www.tex-craft.co.uk/

2 
@media screen and (max-width: 767px){
   header.header {
      background:url("https://cdn.shopify.com/s/files/1/0922/7645/7736/files/0X9A7235.jpg?v=1740069248") no-repeat;
        background-size: 100%;
    }
}

Go to online store ----> themes ----> go to three Dots ----> edit code ---->find theme.liquid files ----> place the code ---->
under the tag before the body ----->
if this code work please do not forget to like and mark it solution

try this one

3

Hi @theexchangeltd

Please follow the steps below:

Step 1: Go to Shopify Admin → Online Store → Theme → Edit code.
Step 2: Go to the assets folder.
Step 3: Insert the following code in the bottom of the base.css file.

header.header {
    background: url(/cdn/shop/files/0X9A7235.jpg?v=1740069248) no-repeat;
    background-size: 100%;
}

Step 4**:** Click Save and check your site.

Hope this can help you!
If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you :heart_eyes:

4

Thank you

5

Thank you for your response. This didn’t work for me when adding it where suggested, but I added the code under custom css when customising the site - clicking on header and adding the code to custom css and it worked.

6

As per our research and based on feedback from our development experts, here’s the answer to your concern:

The current CSS code applies the background image only to devices with a screen width of 990px or larger—which means it only works on desktop devices.

To ensure the image appears on mobile as well, you’ll need to add an additional media query for smaller screens. We recommend inserting the following code below your existing CSS snippet in the base.css file:

@media screen and (max-width: 989px) {
header.header {
background: url(“https://cdn.shopify.com/s/files/1/0922/7645/7736/files/0X9A7235.jpg?v=1740069248”) no-repeat;
background-size: cover;
background-position: center;
}
}
This will allow the image to display correctly on mobile devices by adjusting the background settings to better fit smaller screens.