Change only the mobile background gradient

Store Design
, ,

Topic summary

A user implemented a custom CSS background image for desktop sections using the .gradient class but needs a different image for mobile devices due to the wide desktop image not displaying well on smaller screens.

Two main questions posed:

  1. How to apply background images across all pages more efficiently
  2. How to change the background image specifically for mobile viewing only

Solutions provided:

Two community members offered similar CSS media query approaches:

  • Add @media (max-width: 767px) targeting mobile screens
  • Insert code either in theme.liquid before </body> tag or at the end of assets/base.css
  • Override the .gradient background-image with the mobile-specific URL using !important

The solutions use standard responsive design techniques to serve different background images based on screen width, with the mobile breakpoint set at 767px.

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

Currently I’ve solutioned a background image using the following code in the Custom CSS for various sections for desktop viewing:

.gradient {
  background: var(--gradient-background);
  background-attachment: scroll;
  background-image: url(https://cdn.shopify.com/s/files/1/0606/5707/4263/files/Gradient_Checker_Background.jpg) !important;
  background-color: transparent !important;
  background-position: center !important;
  background-size: cover !important;
  background-repeat: no;
}

However because this is a wide image, I would like to add an alternate image for the background when viewing on mobile. https://cdn.shopify.com/s/files/1/0606/5707/4263/files/Gradient_Checker_Background_mobile.jpg

Example:

Great Lakes Littles Branding Homepage Mobile.jpg
Great Lakes Littles Branding Homepage Mobile.jpg318×546 21.6 KB

  1. Is there a better/easier way for me to apply background images to all of my pages?

  2. How do I change the background image for mobile only?

Website: greatlakeslittles.com

Password: mitten

1 Like
2

You can add code by following these steps

  1. Go to Online Store → Theme → Edit code.

  2. Open your theme.liquid file

  3. Paste the below code before on theme.liquid

@media (max-width: 767px) { .gradient { background-image: [https://cdn.shopify.com/s/files/1/0606/5707/4263/files/Gradient_Checker_Background_mobile.jpg](https://cdn.shopify.com/s/files/1/0606/5707/4263/files/Gradient_Checker_Background_mobile.jpg) !important; } }

my reply helpful? Click Like to let me know!
your question answered? Mark it as an Accepted Solution.

3

Hello @GLL2024

Go to Online Store, then Theme, and select Edit Code.
Search for assets/base.css.
Add the provided code at the end of the file.

@media screen and (max-width: 750px) {
     .gradient {
  background-image: url(https://cdn.shopify.com/s/files/1/0606/5707/4263/files/Gradient_Checker_Background.jpg)!important;
}
}
1 Like