Different Background Image on Mobile Site than on Desktop Site.

[MaisonBillonDon]

Is it possible to have a Different Background Image on my Mobile Site than on my Desktop Site? If so, how would I achieve this with shopify code if the shopify theme doesn't allow it?

Theme: Origin

URL: billon.maison

[Kyle_liu]

Hi @MaisonBillonDon 

Use the following code to replace src and srcset in if (width<750) with the image URL you want to replace.

window.addEventListener('resize', function(event) {
      var width = window.innerWidth;
      var mediaArray = document.querySelectorAll('.banner__media-half > img');
        if (width < 750) {
          mediaArray[0].src='https://ts1.cn.mm.bing.net/th/id/R-C.3a1b98d8aa749503cc2ff9c224bc8b40?rik=xxNkH0iChSUYqg&riu=http%3a%2f%2fd.ifengimg.com%2fq100%2fimg1.ugc.ifeng.com%2fnewugc%2f20190119%2f10%2fwemedia%2fabbab6554fa54232bec645b46e6e7bb3f0e4cc5b_size2326_w3000_h2000.JPG&ehk=UzIcp%2fHqCMHntTpDKBDEvAT%2bhhu8xR805ZL0enQCZ%2fY%3d&risl=1&pid=ImgRaw&r=0';
          mediaArray[0].srcset="https://ts1.cn.mm.bing.net/th/id/R-C.3a1b98d8aa749503cc2ff9c224bc8b40?rik=xxNkH0iChSUYqg&riu=http%3a%2f%2fd.ifengimg.com%2fq100%2fimg1.ugc.ifeng.com%2fnewugc%2f20190119%2f10%2fwemedia%2fabbab6554fa54232bec645b46e6e7bb3f0e4cc5b_size2326_w3000_h2000.JPG&ehk=UzIcp%2fHqCMHntTpDKBDEvAT%2bhhu8xR805ZL0enQCZ%2fY%3d&risl=1&pid=ImgRaw&r=0"
          mediaArray[1].src='https://p26.toutiaoimg.com/origin/tos-cn-i-qvj2lq49k0/22f10850c5234b5285350743cfa16357';
          mediaArray[1].srcset="https://p26.toutiaoimg.com/origin/tos-cn-i-qvj2lq49k0/22f10850c5234b5285350743cfa16357"
        } else if (width >= 750) {
          mediaArray[0].src='//cdn.shopify.com/s/files/1/0583/0279/1746/files/BB-38_54240274-814c-4ade-b67b-40c9168538bb.jpg?v=1726284167&width=3840';
          mediaArray[0].srcset="//cdn.shopify.com/s/files/1/0583/0279/1746/files/BB-38_54240274-814c-4ade-b67b-40c9168538bb.jpg?v=1726284167&width=375 375w, //cdn.shopify.com/s/files/1/0583/0279/1746/files/BB-38_54240274-814c-4ade-b67b-40c9168538bb.jpg?v=1726284167&width=550 550w, //cdn.shopify.com/s/files/1/0583/0279/1746/files/BB-38_54240274-814c-4ade-b67b-40c9168538bb.jpg?v=1726284167&width=750 750w, //cdn.shopify.com/s/files/1/0583/0279/1746/files/BB-38_54240274-814c-4ade-b67b-40c9168538bb.jpg?v=1726284167&width=1100 1100w, //cdn.shopify.com/s/files/1/0583/0279/1746/files/BB-38_54240274-814c-4ade-b67b-40c9168538bb.jpg?v=1726284167&width=1500 1500w, //cdn.shopify.com/s/files/1/0583/0279/1746/files/BB-38_54240274-814c-4ade-b67b-40c9168538bb.jpg?v=1726284167&width=1780 1780w, //cdn.shopify.com/s/files/1/0583/0279/1746/files/BB-38_54240274-814c-4ade-b67b-40c9168538bb.jpg?v=1726284167&width=2000 2000w, //cdn.shopify.com/s/files/1/0583/0279/1746/files/BB-38_54240274-814c-4ade-b67b-40c9168538bb.jpg?v=1726284167&width=3000 3000w, //cdn.shopify.com/s/files/1/0583/0279/1746/files/BB-38_54240274-814c-4ade-b67b-40c9168538bb.jpg?v=1726284167&width=3840 3840w"
          mediaArray[1].src='//cdn.shopify.com/s/files/1/0583/0279/1746/files/BB-22_8d2bcbb0-d935-4761-b87e-0a320343192c.jpg?v=1726282551&width=3840';
          mediaArray[1].srcset="//cdn.shopify.com/s/files/1/0583/0279/1746/files/BB-22_8d2bcbb0-d935-4761-b87e-0a320343192c.jpg?v=1726282551&width=375 375w, //cdn.shopify.com/s/files/1/0583/0279/1746/files/BB-22_8d2bcbb0-d935-4761-b87e-0a320343192c.jpg?v=1726282551&width=550 550w, //cdn.shopify.com/s/files/1/0583/0279/1746/files/BB-22_8d2bcbb0-d935-4761-b87e-0a320343192c.jpg?v=1726282551&width=750 750w, //cdn.shopify.com/s/files/1/0583/0279/1746/files/BB-22_8d2bcbb0-d935-4761-b87e-0a320343192c.jpg?v=1726282551&width=1100 1100w, //cdn.shopify.com/s/files/1/0583/0279/1746/files/BB-22_8d2bcbb0-d935-4761-b87e-0a320343192c.jpg?v=1726282551&width=1500 1500w, //cdn.shopify.com/s/files/1/0583/0279/1746/files/BB-22_8d2bcbb0-d935-4761-b87e-0a320343192c.jpg?v=1726282551&width=1780 1780w, //cdn.shopify.com/s/files/1/0583/0279/1746/files/BB-22_8d2bcbb0-d935-4761-b87e-0a320343192c.jpg?v=1726282551&width=2000 2000w, //cdn.shopify.com/s/files/1/0583/0279/1746/files/BB-22_8d2bcbb0-d935-4761-b87e-0a320343192c.jpg?v=1726282551&width=3000 3000w, //cdn.shopify.com/s/files/1/0583/0279/1746/files/BB-22_8d2bcbb0-d935-4761-b87e-0a320343192c.jpg?v=1726282551&width=3840 3840w"
        }
    });

[Dan-From-Ryviu]

Hi @MaisonBillonDon 

You can create 2 banner sections and then add code to each Custom CSS on each section to hide the desktop section on mobile and vice versa. 

Add this code to Custom CSS of the mobile section.

@media (min-width: 750px) {
.banner { display: none; }
}

Add this code to Custom CSS of the desktop section 

@media (max-width: 749px) {
.banner { display: none; }
}

[MaisonBillonDon]

Okay, when I used that code it worked! But there is just a few problems left to solve. I want the same text from the footer of my desktop site to be at the bottom of my mobile site but centered. I only want the footer text centered for the mobile site but not the desktop site. The other problem is that when I added another image banner for the mobile layout, its requiring me to select two photos when I only want one photo for my mobile site. So now my mobile site has a big white box under the photo that I want to cover the entire background of the mobile site. 

Ive included photos of my desktop site with the footer text circled for the first problem and have included a screen shot of what my mobile site currently looks like with the white box circled for the second problem. 

[MaisonBillonDon]

Hello @Dan-From-Ryviu Please see my other response. There is a white gap on the mobile site that I would like to get rid of. How can I do that?

[Dan-From-Ryviu]

Please turn off this option on that banner section.

[MaisonBillonDon]

@Dan-From-Ryviu There was no change when I turned that feature off on that banner section unfortunately. 

[Dan-From-Ryviu]

Please add this code to Custom CSS of that section.

@media (max-width: 749px) {
    .banner { height: 100vh; }
}