Mobile/Desktop Different Images

[HaidenAMu19]

Good afternoon,

I am attempting to use a different image for my mobile background, and I was wondering what I am doing wrong. In the bottom of the base.css file, I have added the custom code below.

What I am intending to do is use a different image for mobile and also scale it to fit the store background for mobile. Is there any tweaks to the code I can make to accomplish this? My store is Laugh Labs Design, url: laughlabsdesign.com

[Michkyy]

Have you found a way around it already, or you’ll still need some aid?

[Howie10]

Check out this page, it might be useful. Background Different for Mobile And Desktop

[tim_tairli]

At the moment you have this code, which does not work. So the question is on what element you want to set this background – on body or on image-with-text?

@media only screen and (max-width: 500px){
  .image-with-text.image-with-text--no-overlap.isolate.collapse-corners {
     body {
       background-image: url(/cdn/shop/files/Mobile_Background_Complete_V3.png?v=1761683225) !important;
       background-repeat: no-repeat;
       background-size: cover !important;
       background-position: center;
       height: 100vh;
       width: 80vw;
       position: fixed;
    }
  }
}

[HaidenAMu19]

Hi Tim,

I didn’t respond yesterday for some reason, sorry about that. Currently, I am trying to get the mobile image to show over the entire background. I have two problems at the moment …

1. The desktop image shows on mobile when I want the mobile image background to show up.
2. I am unclear which solution is the better one (image with text or using “body”). I tried both variables, neither of which worked on there own.

Apologies, I know that isn’t alot to go on.

[tim_tairli]

Ah, ok.
I was not quite clear myself – the code snippet I’ve quoted will never work because of extra nesting.
It can work like this:

@media only screen and (max-width: 500px){
     body {
       background-image: url(/cdn/shop/files/Mobile_Background_Complete_V3.png?v=1761683225);
       background-repeat: no-repeat;
       background-size: cover;
       background-position: center;
    }
  }

And generally it should be done like this:

body {
   background-image: url(/cdn/shop/files/desktop_bg_image.png);
   background-repeat: no-repeat;
   background-size: cover;
   background-position: center;
}
@media only screen and (max-width: 500px){
   body {
     background-image: url(/cdn/shop/files/mobile_bg_image.png);
  }
}

[HaidenAMu19]

Hey Tim,

Thanks for the follow up! Apologies for not answering you, was in the midst of the Christmas campaign. I created a draft store theme layout to test your code you wrote above and obviously replaced the example URLs with my picture URLs. The pictures do not show up for some reason. All I get is the theme colours in the background. f you want I can set my site tpo the draft version so that you can have a look at it. This is what i see with your code, not sure why …

[tim_tairli]

Share a (preview) link to the site in question, otherwise it’s hard to tell…

[suyash1]

@HaidenAMu19 can you please share this page link? your page background is black, do you want to show image in that place?

[HaidenAMu19]

Laugh Labs Design

I set the Laugh Labs Design V3 as the published template. I removed the code I wrote in the base css (should be around line 3650 where I start my personal custom code) where I inserted it into the gradient and instead inserted it into the body, and it just shows the theme colours.

[tim_tairli]

The code like below should work (images are random).

Note that most of sections, even some other elements have their own background setting, which, of course “overshadow” the body background.
It’s possible to set background gradient to transparent for those in color settings, but can also use a “cover-all” kind of CSS rule.

/* remove background on body children which should have it  by default.
   or set background to transparent gradient in color settings instead */
.gradient {
  background: transparent;
}

/* body background settings and desktop image */
body.gradient {
   background-image: url(https://laughlabsdesign.com/cdn/shop/files/NothingButFunctionsPosterComplete.png);
   background-repeat: no-repeat;
   background-size: cover;
   background-position: center;
   background-attachment: fixed;
}

/* body background for mobile */
@media only screen and (max-width: 750px){
   body.gradient {
     background-image: url(https://laughlabsdesign.com/cdn/shop/files/Nuclear_Isotopes_Poster_11840f11-9def-4dc4-b2ac-35c9b758ccdb.png);
  }
}

[HaidenAMu19]

You are the best Tim, thank you so much! My code only solved the desktop image, it did not solve the proper sizing and mobile image settings.