Change the Mobile Background Image in Squarespace 7.1

[@philippe888]

Very helpful, thank you. Effect is still missing however, any fix?

[@grateful_julia]

Very helpful 👌thanks a lot. Hug from Switzerland

[@Thatsbubblestoyou]

Thanks for this, it was very helpful! I was able to switch my image to a more mobile-friendly format, but the effect (film grain) was still missing, even after using the second bit of code. I'm using the Mycelium template. Any advice would be super appreciated!

[@betorosales351]

Thank You! this was really helpful

[@RebeccaGraceDesigns]

You're welcome!

[@jorgemolina8424]

Love it!! Thank you so much!!!!!!!

[@joytagle9070]

Would you know how to do this for a gallery section?

[@graypham1517]

Hi there! The video was super helpful and everything worked great! Only issue I'm having is that the images on my carousel (I used the people gallery section) have disappeared on mobile. All of the buttons and the arrows are present but the images have disappeared. Any ideas?

[@RebeccaGraceDesigns]

Thank you for letting me know. I have updated the code on my blog. Try using the new code instead!

[@SiennaFletcher-t2o]

does this work for video too?

[@buckyfg9017]

I did it but I still have the front image showing up on the mobile as well as the new BACKGROUND image.

[@abrahmakin2031]

Thanks!

[@RebeccaGraceDesigns]

No problem!

[@crystalwright642]

Hi, when I right click on the image to open it in a new tab, it doesn't give me the option 😐 is there another way to do this?

[@katherinecroucher5507]

Hi if you click on the 3 dots on the image and select 'File Details' you can then right click 'Open image in new tab'

[@ellehodge3065]

Could you create code to do this to multiple pages on a site? It has been a while since I took a coding class and I keep getting error messages :,)

[@RebeccaGraceDesigns]

If it is the same image then you can use a comma in between the collection ids. For example
/* Rebecca Grace Designs Mobile Banner Image */
@media only screen and (max-width: 640px) {
#COLLECTIONID, #COLLECTIONID, #COLLECTIONID{
#page .page-section:nth-of-type(1) {
.section-background img {
display: none !important;
}
.section-background {
background: url("IMAGE URL");
background-repeat: no-repeat;
background-size: 100%;
}
}
}
}
If you want different images on each section, then you will have to repeat the whole code.