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_1]

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_1]

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