laginagulonja 0 Share Posted April 30, 2020 (edited) Site URL: https://laginagulonjagl.squarespace.com/ Hi, I want to change the background of my home page on mobile, as the desktop version does not look nice. Can someone help me with that? 🙂 - Galina Edited April 30, 2020 by laginagulonja Link to post
1 tuanphan 9,349 Share Posted May 2, 2020 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 You can send your question to my email to get faster answer. How to: Setup password & share url Insert Custom CSS Open Page Header Upload Custom Font Find Block ID, Data Section ID Contact Squarespace Customer Care -- Yup! Link to post
1 tuanphan 9,349 Share Posted May 10, 2020 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"] You can send your question to my email to get faster answer. How to: Setup password & share url Insert Custom CSS Open Page Header Upload Custom Font Find Block ID, Data Section ID Contact Squarespace Customer Care -- Yup! Link to post
1 tuanphan 9,349 Share Posted May 11, 2020 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="..." You can send your question to my email to get faster answer. How to: Setup password & share url Insert Custom CSS Open Page Header Upload Custom Font Find Block ID, Data Section ID Contact Squarespace Customer Care -- Yup! Link to post
1 tuanphan 9,349 Share Posted August 17, 2020 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 {}  You can send your question to my email to get faster answer. How to: Setup password & share url Insert Custom CSS Open Page Header Upload Custom Font Find Block ID, Data Section ID Contact Squarespace Customer Care -- Yup! Link to post
0 AaronKurz 0 Share Posted May 9, 2020 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 AaronKurz 0 Share Posted May 10, 2020 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 AaronKurz 0 Share Posted May 11, 2020 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 🙂 Link to post
0 tuanphan 9,349 Share Posted May 12, 2020 SS 7.0 doesn't support data-section-id above code, I wrote, for SS 7.1 You can send your question to my email to get faster answer. How to: Setup password & share url Insert Custom CSS Open Page Header Upload Custom Font Find Block ID, Data Section ID Contact Squarespace Customer Care -- Yup! Link to post
0 pizzac4t 0 Share Posted August 13, 2020 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 nabe 0 Share Posted December 19, 2020 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 tuanphan 9,349 Share Posted December 22, 2020 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? You can send your question to my email to get faster answer. How to: Setup password & share url Insert Custom CSS Open Page Header Upload Custom Font Find Block ID, Data Section ID Contact Squarespace Customer Care -- Yup! Link to post
Question
laginagulonja 0
Site URL: https://laginagulonjagl.squarespace.com/
Hi, I want to change the background of my home page on mobile, as the desktop version does not look nice. Can someone help me with that? 🙂
- GalinaÂ
Link to post
Top Posters For This Question
6
3
1
1
Popular Days
May 11
2
May 10
2
Dec 22
1
Apr 30
1
Top Posters For This Question
tuanphan 6 posts
AaronKurz 3 posts
laginagulonja 1 post
pizzac4t 1 post
Popular Days
May 11 2020
2 posts
May 10 2020
2 posts
Dec 22 2020
1 post
Apr 30 2020
1 post
Posted Images
11 answers to this question
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment