David-Pappy-2020 Posted May 4, 2020 Share Posted May 4, 2020 Hello All, I'm looking to customize the full background of my current template 'Horizon'. I added the following CSS to my Homepage, but I am not seeing the image appear: #code { background-image: url(https://static1.squarespace.com/static/5e8e444d060d9c69061aab33/t/5eaf32a6437a4e57ef531b06/1588540071899/silent-season-background.png); } I'm seeing that SquareSpace does not allow custom code on cover pages. Are they considering index.html/home a cover page? Any help here is greatly appreciated. Thanks, David Link to comment
tuanphan Posted May 5, 2020 Share Posted May 5, 2020 SS allows custom code on Cover Page. Add code to Cover Page Header <style> Your css code here </style> Can you share link to your cover page? 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
David-Pappy-2020 Posted May 5, 2020 Author Share Posted May 5, 2020 Hi tuanphan, I added the style tags as recommended and I couldn't get the background to show - <style> #code { background-image: url(https://static1.squarespace.com/static/5e8e444d060d9c69061aab33/t/5eaf32a6437a4e57ef531b06/1588540071899/silent-season-background.png); } </style> Note: I am adding this code to the 'Custom CSS' area within the platform. Website is https://www.silentseasonmusic.com Thanks, David Link to comment
tuanphan Posted May 5, 2020 Share Posted May 5, 2020 (edited) Add to Cover Page Settings > Advanced > Header Custom CSS box can't affect Cover Page Edited May 5, 2020 by tuanphan 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
David-Pappy-2020 Posted May 5, 2020 Author Share Posted May 5, 2020 Can you screenshot the location that we can drop the css that you're speaking of? I went to the Welcome/Home pages and advanced and dropped the code in each CSS section. Still not seeing the background change. Thanks, David Link to comment
tuanphan Posted May 6, 2020 Share Posted May 6, 2020 16 hours ago, David-Pappy-2020 said: Can you screenshot the location that we can drop the css that you're speaking of? I went to the Welcome/Home pages and advanced and dropped the code in each CSS section. Still not seeing the background change. Thanks, David are you sure this CSS class name is correct? Quote #code You want to add background image for whole page? 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
David-Pappy-2020 Posted May 6, 2020 Author Share Posted May 6, 2020 Hi tuanphan, I referenced the sample CSS from an instructional video on SquareSpace. I'm not very experienced with CSS, as I am more involved with HTML only. Yes, I would like to add this background image to the whole page. Thanks, David Link to comment
tuanphan Posted May 7, 2020 Share Posted May 7, 2020 19 hours ago, David-Pappy-2020 said: Hi tuanphan, I referenced the sample CSS from an instructional video on SquareSpace. I'm not very experienced with CSS, as I am more involved with HTML only. Yes, I would like to add this background image to the whole page. Thanks, David Add to Home > Design > Custom CSS .homepage div#siteWrapper { background-image: url(https://cdn.pixabay.com/photo/2020/05/04/16/05/mckenzie-river-5129717__340.jpg); background-size: cover; background-repeat: no-repeat; background-position: center center; } 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
David-Pappy-2020 Posted May 11, 2020 Author Share Posted May 11, 2020 (edited) On 5/7/2020 at 4:36 AM, tuanphan said: Add to Home > Design > Custom CSS .homepage div#siteWrapper { background-image: url(https://cdn.pixabay.com/photo/2020/05/04/16/05/mckenzie-river-5129717__340.jpg); background-size: cover; background-repeat: no-repeat; background-position: center center; } Hi tuanphan, We're getting close here - www.silentseasonmusic.com All I need now is to fix the picture size (Can we add dimensions to the size tag?), and make sure the image extends to the navigation and footer. Thanks for all of the help! David Edited May 11, 2020 by David-Pappy-2020 Link to comment
tuanphan Posted May 12, 2020 Share Posted May 12, 2020 Add above code + this code .homepage footer#footer { background: transparent; } .homepage header#header { background: transparent !important; position: absolute; } 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
David-Pappy-2020 Posted May 17, 2020 Author Share Posted May 17, 2020 Hi tuanphan, Thanks for the additional code as it worked out perfectly! How can I control the size of the background? As you can see it's zoomed in if you visit www.silentseasonmusic.com Should I make a change to the original background file or include size percentages in my code? Best, David Link to comment
tuanphan Posted May 17, 2020 Share Posted May 17, 2020 1 hour ago, David-Pappy-2020 said: Hi tuanphan, Thanks for the additional code as it worked out perfectly! How can I control the size of the background? As you can see it's zoomed in if you visit www.silentseasonmusic.com Should I make a change to the original background file or include size percentages in my code? Best, David background-size: cover; background-size: contain; background-size: auto; you can try 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
David-Pappy-2020 Posted May 17, 2020 Author Share Posted May 17, 2020 1 hour ago, tuanphan said: background-size: cover; background-size: contain; background-size: auto; you can try Looks like percentages are working. Unfortunately, the background is not working responsively for me. David tuanphan 1 Link to comment
tuanphan Posted May 18, 2020 Share Posted May 18, 2020 8 hours ago, David-Pappy-2020 said: Looks like percentages are working. Unfortunately, the background is not working responsively for me. David You mean 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
David-Pappy-2020 Posted May 19, 2020 Author Share Posted May 19, 2020 That is correct. I know we would need to generate responsive code to cover mobile devices. Link to comment
Chloe123 Posted August 20, 2021 Share Posted August 20, 2021 Hi, I've tried the code above on my Squarespace site but this isn't working. This is what I've put in: .homepage div#siteWrapper { background-image: url(https://static1.squarespace.com/static/6116850124779a5aa1475b06/t/611a7731119a296f45de8abb/1629125207702/jacob-mejicanos-1ECUhpuUOlw-unsplash.jpg); background-size: cover; background-repeat: no-repeat; background-position: fixed; } Are there any errors? Nothing is coming up Link to comment
tuanphan Posted August 22, 2021 Share Posted August 22, 2021 On 8/20/2021 at 3:43 PM, Isobel12345 said: Hi, I've tried the code above on my Squarespace site but this isn't working. This is what I've put in: .homepage div#siteWrapper { background-image: url(https://static1.squarespace.com/static/6116850124779a5aa1475b06/t/611a7731119a296f45de8abb/1629125207702/jacob-mejicanos-1ECUhpuUOlw-unsplash.jpg); background-size: cover; background-repeat: no-repeat; background-position: fixed; } Are there any errors? Nothing is coming up Hi, What is your site url? 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
Chloe123 Posted August 25, 2021 Share Posted August 25, 2021 Hi Tuanphan, It's guitar-synthesizer-tnhz.squarespace.com, and password is guitar1. Many thanks Link to comment
tuanphan Posted August 27, 2021 Share Posted August 27, 2021 On 8/25/2021 at 3:36 PM, Woodshack said: Hi Tuanphan, It's guitar-synthesizer-tnhz.squarespace.com, and password is guitar1. Many thanks Try this code /* Site background image */ .section-background, .page-section { background: transparent !important; } body { background-image: url(https://cdn.pixabay.com/photo/2021/01/07/22/15/dandelion-5898546__340.jpg); background-size: cover; background-repeat: no-repeat; background-position: center center; background-color: transparent !important; } 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
Chloe123 Posted September 3, 2021 Share Posted September 3, 2021 The fixed position is working on desktop but this doesn't fix on mobile. Is there a way to make it fixed on mobile please? Link to comment
tuanphan Posted September 5, 2021 Share Posted September 5, 2021 On 9/3/2021 at 10:12 PM, Chloe123 said: The fixed position is working on desktop but this doesn't fix on mobile. Is there a way to make it fixed on mobile please? Hi, can you check password again? Quote guitar1. 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
Chloe123 Posted September 28, 2021 Share Posted September 28, 2021 Hi @tuanphan, The fixed background works on Desktop, but when I look on my phone this doesn't work and the image is stretched and scrolling with other content. Do you know if there's a way around this? The link for the site is: dalmatian-dachshund-ba7x.squarespace.com and password: guitar1 Thanks Link to comment
tuanphan Posted September 29, 2021 Share Posted September 29, 2021 On 8/25/2021 at 3:36 PM, Chloe123 said: Hi Tuanphan, It's guitar-synthesizer-tnhz.squarespace.com, and password is guitar1. Many thanks 23 hours ago, Chloe123 said: Hi @tuanphan, The fixed background works on Desktop, but when I look on my phone this doesn't work and the image is stretched and scrolling with other content. Do you know if there's a way around this? The link for the site is: dalmatian-dachshund-ba7x.squarespace.com and password: guitar1 Thanks Hi, Which page did you add the code? 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
Chloe123 Posted October 11, 2021 Share Posted October 11, 2021 Hi @Tuanphan, I added it to the Custom Css Part Link to comment
tuanphan Posted October 13, 2021 Share Posted October 13, 2021 On 10/11/2021 at 9:10 PM, Chloe123 said: Hi @Tuanphan, I added it to the Custom Css Part Hi, Sorry, I meant which page you want to apply the code 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
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment