Transparent Background Color for Block

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!

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?

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!

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?

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!