Jump to content

Transparent Background Color for Block

Go to solution Solved by beatrizc,

Recommended Posts

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

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 
🔌
 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 Did I help? Buy me a coffee?

Link to comment

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
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
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
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!

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.