carlosatbv Posted November 25, 2022 Share Posted November 25, 2022 Hello! I had code for two pages on my website to have a background image instead of a solid color, however, recently it looks like the background color for the block is now showing on top of the background image. WEBSITE: https://www.bluevertigo.org/thespacepirate and https://www.bluevertigo.org/ryukaze <style type="text/css"> header, footer { display: none; } section { padding-top: 0 !important; } body { background-image: url(https://images.squarespace-cdn.com/content/v1/62df76fe466ab72a83065a20/1546529d-b10b-4460-8133-f55084f7a1f4/TSP+BV+Landing+Page+BG+NO+FILTER+NEW.png); background-size: cover; background-repeat: no-repeat; background-position: left center; } </style> (The code is identical between the two sites outside of the background image) Thanks for your help! Link to comment
Ziggy Posted November 25, 2022 Share Posted November 25, 2022 I don't see the background image on either page, I don't specifically see an error with the code, but can I ask why you don't just use the section background image? Is there something that that doesn't do? Please like and upvote if my comments were helpful to you. Cheers! Zygmunt Spray Squarespace Website Designer Contact me: https://squarefortytwo.com ☕ Did I help? Buy me a coffee? 🔌 Ghost Squarespace Plugins (Referral link) 📈 SEO Space (Referral link) ⬛ SquareWebsites Plugins (Referral link) 🔲 SQSP Themes (Referral link) ✨ Spark Plugin (Referral link) Link to comment
beatrizc Posted November 25, 2022 Share Posted November 25, 2022 Hey @carlosatbv! It looks like the problem is coming from a recent update made to the section containers. There's an easy fix for it, tho. You'll need to set the background-color of the .section-border container as transparent for those specific sections, like so: [data-section-id="62e1ebdb37f3380f89785e44"] .section-border { background-color: transparent; } Make sure to use the corresponding data-section-id for each page. Hope that helps! Squarespace Customization Geek | Helping fellow designers code the heck out of Squarespace ☞ Get the free Squarespace Coding Essentials guide to reach that next level of customization you're aiming for. ☞ Check out all the plugins & mini-courses and masterclasses available to help speed up your projects. ☞ Looking to outsource a customization or fix? I'd love to help you out. Get in touch! Website | Youtube | Facebook | Pinterest Link to comment
carlosatbv Posted November 26, 2022 Author Share Posted November 26, 2022 On 11/25/2022 at 11:15 AM, Ziggy said: I don't see the background image on either page, I don't specifically see an error with the code, but can I ask why you don't just use the section background image? Is there something that that doesn't do? On those pages I have removed the header/footer and the background image covers the entire width/height of the background. This is to make it similar to Squarespace's landing pages in the pre-7.1 era. On 11/25/2022 at 1:41 PM, beatrizc said: Hey @carlosatbv! It looks like the problem is coming from a recent update made to the section containers. There's an easy fix for it, tho. You'll need to set the background-color of the .section-border container as transparent for those specific sections, like so: [data-section-id="62e1ebdb37f3380f89785e44"] .section-border { background-color: transparent; } Make sure to use the corresponding data-section-id for each page. Hope that helps! @beatrizcI'm having trouble implementing this, I've added the code to my custom CSS with the correct section-id but the white background on the section still remains. Anything I might be missing? Link to comment
Solution beatrizc Posted November 28, 2022 Solution Share Posted November 28, 2022 On 11/26/2022 at 3:29 PM, carlosatbv said: On those pages I have removed the header/footer and the background image covers the entire width/height of the background. This is to make it similar to Squarespace's landing pages in the pre-7.1 era. @beatrizcI'm having trouble implementing this, I've added the code to my custom CSS with the correct section-id but the white background on the section still remains. Anything I might be missing? I see what you mean! You can use this modified version of the snippet to make sure the background is also removed from the .section-background container: [data-section-id="62e217a2272db41bddb2ac0e"] .section-border, [data-section-id="62e217a2272db41bddb2ac0e"] .section-background { background-color: transparent; } That should do the trick! Squarespace Customization Geek | Helping fellow designers code the heck out of Squarespace ☞ Get the free Squarespace Coding Essentials guide to reach that next level of customization you're aiming for. ☞ Check out all the plugins & mini-courses and masterclasses available to help speed up your projects. ☞ Looking to outsource a customization or fix? I'd love to help you out. Get in touch! Website | Youtube | Facebook | Pinterest Link to comment
carlosatbv Posted November 29, 2022 Author Share Posted November 29, 2022 22 hours ago, beatrizc said: I see what you mean! You can use this modified version of the snippet to make sure the background is also removed from the .section-background container: [data-section-id="62e217a2272db41bddb2ac0e"] .section-border, [data-section-id="62e217a2272db41bddb2ac0e"] .section-background { background-color: transparent; } That should do the trick! This absolutely did the trick and it's working now! Thank you so much @beatrizc, you rock! beatrizc 1 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