Change only the mobile background gradient

[GLL2024]

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: 

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

[Tech_Coding]

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 </body> on theme.liquid
<style>
@media (max-width: 767px) {
   .gradient { 
       background-image: https://cdn.shopify.com/s/files/1/0606/5707/4263/files/Gradient_Checker_Background_mobile.jpg !important;
   }
}
</style>
my reply helpful? Click Like to let me know!
your question answered? Mark it as an Accepted Solution.

[devcoders · Accepted solution]

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