Jump to content

Change background image on mobile

Recommended Posts

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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
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 🙂

Link to comment
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"]

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
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="..."

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
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 🙂

CSS screenshot (normal site).png

CSS screenshot (Squarespace backend).png

Link to comment
  • 3 months later...
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 

 

Link to comment
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 {}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 4 months later...
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 🙂 

Link to comment
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?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 8 months later...
On 8/24/2021 at 2:22 PM, Theresamo said:

Hi @tuanphan I tried the code above but it didn't work on my site.

This is it here:

https://michaelandalex.squarespace.com/

Any help would be much appreciated.

Thanks!

Hi,

Resize image or add new image on mobile?

And top banner image or which image?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.