Change only the mobile background gradient

Store Design
, ,
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

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;
}
}