Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Change background image on mobile


laginagulonja

Question

  • Answers 11
  • Created
  • Last Reply

Top Posters For This Question

11 answers to this question

Recommended Posts

  • 1

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

Link to post
  • 1
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"]
Link to post
  • 1
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="..."

Link to post
  • 1
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 {}

 

Link to post
  • 0
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 post
  • 0
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?

Link to post
  • 0
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 post
  • 0
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 post
  • 0
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 post
  • 0
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?

Link to post

Create an account or sign in to comment

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


×
×
  • Create New...