Change background image on mobile

Add to Home > Design > Custom CSS

@media screen and (max-width:767px) {
/* hide current image */
[data-section-id="5e8c390a09dbf467b60fb0c3"] .section-background img {
    visibility: hidden;
}
/* set new image */
[data-section-id="5e8c390a09dbf467b60fb0c3"] .section-background {
    background-image: url(https://beaverhero.com/wp-content/uploads/2018/10/wpcodeless-automatic-backup-managewp11-min.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}
}

How to upload image: https://support.squarespace.com/hc/en-us/articles/205813928-Uploading-and-managing-files

10 hours ago, AaronKurz said:

Hi tuanphan, I’m trying to do the exact same thing with my website. I assume I can just use this exact code, with a substitution to the URL of the image I want to use, correct?

Thanks very much 🙂

repalce section id & image url

[data-section-id="5e8c390a09dbf467b60fb0c3"]

9 hours ago, AaronKurz said:

Thank you -- however, where do I find what I need to replace section id with?

Hover on image > Right Click > Inspect (or Inspect Element) > Look left box > Find <section tag, you will see data-section-id="..."

On 8/14/2020 at 4:41 AM, pizzac4t said:

Hi @tuanphan! This worked for 1 section on my homepage. When I copy and pasted the text a second time and changed the data section ID nothing showed up. I tried your alternative of calling the div#block mentioned below which showed a background image but the padding around the block itself cuts off the background image. 

 

How do I go about changing the mobile backgrounds for different sections?

site: https://mackerel-wolverine-cfbm.squarespace.com/
pass: villa 

 

if you use data section id, you need to adjust a bit

Quote

data-section-id .section-background {}

On 5/2/2020 at 9:17 AM, tuanphan said:

Add to Home > Design > Custom CSS

@media screen and (max-width:767px) {
/* hide current image */
[data-section-id="5e8c390a09dbf467b60fb0c3"] .section-background img {
    visibility: hidden;
}
/* set new image */
[data-section-id="5e8c390a09dbf467b60fb0c3"] .section-background {
    background-image: url(https://beaverhero.com/wp-content/uploads/2018/10/wpcodeless-automatic-backup-managewp11-min.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}
}

How to upload image: https://support.squarespace.com/hc/en-us/articles/205813928-Uploading-and-managing-files

Hi tuanphan, I’m trying to do the exact same thing with my website. I assume I can just use this exact code, with a substitution to the URL of the image I want to use, correct?

Thanks very much 🙂

14 hours ago, tuanphan said:

repalce section id & image url

[data-section-id="5e8c390a09dbf467b60fb0c3"]

Thank you -- however, where do I find what I need to replace section id with?

7 hours ago, tuanphan said:

Hover on image > Right Click > Inspect (or Inspect Element) > Look left box > Find <section tag, you will see data-section-id="..."

Sorry for being so dense, but I have the Dev Tools box open and this is all I see (I attached two screenshots, one for the Dev Tools on the live website and one for the Dev Tools on the Squarespace editor). I don't see much for the one on the live website (I Control-F'd "section" and there wasn't much), whereas for the one on the Squarespace editor has more but nothing that specifically says data-section-id. Is it the id=yui_3....... in the <section area? I just want to make sure I'm doing it correctly and don't accidentally blow up my site by putting in the wrong code!

Thanks for all the help 🙂

SS 7.0 doesn't support data-section-id

above code, I wrote, for SS 7.1

On 5/2/2020 at 10:17 AM, tuanphan said:

Add to Home > Design > Custom CSS

@media screen and (max-width:767px) {
/* hide current image */
[data-section-id="5e8c390a09dbf467b60fb0c3"] .section-background img {
    visibility: hidden;
}
/* set new image */
[data-section-id="5e8c390a09dbf467b60fb0c3"] .section-background {
    background-image: url(https://beaverhero.com/wp-content/uploads/2018/10/wpcodeless-automatic-backup-managewp11-min.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}
}

How to upload image: https://support.squarespace.com/hc/en-us/articles/205813928-Uploading-and-managing-files

Hi @tuanphan! This worked for 1 section on my homepage. When I copy and pasted the text a second time and changed the data section ID nothing showed up. I tried your alternative of calling the div#block mentioned below which showed a background image but the padding around the block itself cuts off the background image. 

On 7/22/2020 at 5:46 AM, tuanphan said:

Add to Home > Design > Custom CSS

@media screen and (max-width:640px) {
div#block-yui_3_17_2_1_1594858759957_4467 {
    background-image: url(https://beaverhero.com/wp-content/uploads/2020/06/twitter-292994_640.jpg);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}
div#block-yui_3_17_2_1_1594858759957_4467 img {
    visibility: hidden;
}
}

 

How do I go about changing the mobile backgrounds for different sections?

site: https://mackerel-wolverine-cfbm.squarespace.com/
pass: villa 

On 5/2/2020 at 3:17 PM, tuanphan said:

Add to Home > Design > Custom CSS

@media screen and (max-width:767px) {
/* hide current image */
[data-section-id="5e8c390a09dbf467b60fb0c3"] .section-background img {
    visibility: hidden;
}
/* set new image */
[data-section-id="5e8c390a09dbf467b60fb0c3"] .section-background {
    background-image: url(https://beaverhero.com/wp-content/uploads/2018/10/wpcodeless-automatic-backup-managewp11-min.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}
}

How to upload image: https://support.squarespace.com/hc/en-us/articles/205813928-Uploading-and-managing-files

Hi tuanphan,

I'm trying to do the same thing as OP. I tried adding the above code, I've change the data-section-id and image url but it doesn't seem to be working. Site is: https://www.na-be.co.uk/

I'm currently using a work around detailed here, but I'd prefer to get your method working if possible

would appreciate your help 🙂 

On 12/20/2020 at 3:42 AM, nabe said:

Hi tuanphan,

I'm trying to do the same thing as OP. I tried adding the above code, I've change the data-section-id and image url but it doesn't seem to be working. Site is: https://www.na-be.co.uk/

I'm currently using a work around detailed here, but I'd prefer to get your method working if possible

would appreciate your help 🙂 

You want replace new image on mobile or make image fullsize on mobile?