Jump to content

Having issus with transparent background

Recommended Posts

I'm having issus with transparent background o a specific section. Today in the morning my costum css code was still working, but now it is having issus and i am not able to have a specific section woth transparent background.

That was my code:

#page .page-section:nth-child(2) , #page .page-section:nth-child(2) .section-background{background-color:transparent!important;}

I also tried to target the section specificly with the section id, like this:

[data-section-id="636eb26c42f32b1f7b5b81eb"] {
  background-color:transparent!imoprtant;
}

it also does not work, what can i do?

Link to comment
  • Replies 14
  • Views 726
  • Created
  • Last Reply

Top Posters In This Topic

Squarespace made some code changes to page sections this week, so you'll most likely need to re-write the CSS. If you need help with this, you'll need to provide us with specific details so we can see these sections on the site. For more information, see How to Post a Forum Question.

Me: I'm Paul, a SQSP user for >18 yrs & Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL. We provide high quality original extensions to supercharge your Squarespace website. 
Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links.
Forum advice is completely free. You can thank me by selecting a feedback emoji. Buying a coffee is generous but optional.

Link to comment

Hello everyone!

several month ago I customized the background image for the entire website using this code: 

/*WEBSITE BACKGROUND*/
.section-background, .page-section {
    background: transparent !important;
}
body {
    background-image: url(https://static1.squarespace.com/static/62f16b998dcd805473a84699/t/636fabc24c2fed6be47c5aa2/1668262854335/bpebg.jpg);
   background-size: cover;
   background-repeat: no-repeat;
   background-position: center center;
   background-color: transparent !important;
}

The code worked without problem ever since.
Today I see that the image doesn't show up anymore and checking with my client she didn't touched the custom code/gallery/custom css uploaded files.

Can someone help me defining the problem and solving it? Thank you so much

Link to comment
6 minutes ago, AlessiaGarbarinoGraphics said:

I customized the background image for the entire website. Today I see that the image doesn't show up anymore

See my post above.

Me: I'm Paul, a SQSP user for >18 yrs & Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL. We provide high quality original extensions to supercharge your Squarespace website. 
Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links.
Forum advice is completely free. You can thank me by selecting a feedback emoji. Buying a coffee is generous but optional.

Link to comment
4 hours ago, paul2009 said:

Squarespace made some code changes to page sections this week, so you'll most likely need to re-write the CSS. If you need help with this, you'll need to provide us with specific details so we can see these sections on the site. For more information, see How to Post a Forum Question.

Hi! Thank you. 
The problem is persisting in every page of the website besides the shopping cart page. The code added was in the post you quoted. 
I basically have uploaded in the custom css one image that was covering entirely each page, from header to footer.

please let me know if you need further info!

Link to comment
14 minutes ago, AlessiaGarbarinoGraphics said:

please let me know if you need further info!

Please provide a link to one of the pages. I'd need to view the page.

Me: I'm Paul, a SQSP user for >18 yrs & Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL. We provide high quality original extensions to supercharge your Squarespace website. 
Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links.
Forum advice is completely free. You can thank me by selecting a feedback emoji. Buying a coffee is generous but optional.

Link to comment
20 hours ago, paul2009 said:

Please provide a link to one of the pages. I'd need to view the page.

Hi! Ok I was working on that yesterday and I had to add this code here, for everyone who is having the same site-wide image background problem: 

.page-section .section-border {
   background-color: transparent !important;  
}

Now it works again. 
Thank you anyway for the help!!

Link to comment
18 hours ago, AlessiaGarbarinoGraphics said:

Hi! Ok I was working on that yesterday and I had to add this code here, for everyone who is having the same site-wide image background problem: 

.page-section .section-border {
   background-color: transparent !important;  
}

Now it works again. 
Thank you anyway for the help!!

I've had no luck with adding .section-border, so I'm back to using opacity for now.

If anyone has any ideas, please let me know. There's my homepage with the error, and I'm trying to fix section 622e5b8ddd586822ec87dd31

https://noahlangphotography.com/ 

Link to comment
On 11/14/2022 at 2:54 PM, noahawaii said:

I've had no luck with adding .section-border, so I'm back to using opacity for now.

If anyone has any ideas, please let me know. There's my homepage with the error, and I'm trying to fix section 622e5b8ddd586822ec87dd31

https://noahlangphotography.com/ 

Hi,

Which page are you referring to?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 2 months later...

Hello!  Back at it again with the same problem. (the transparent css not working) 

Can someone help me out on that? 

To recap I have a site-wide background image that doesn't show!

Link to website: https://www.bigpussyenergy.co/     (i've now replaced the "transparent" tag with a purple color)
And this is the css I have: 

.section-background, .page-section, .section-border {
    background-color: transparent !important;
}

body {
    background-image: url(https://static1.squarespace.com/static/62f16b998dcd805473a84699/t/63f67ada9bc5b97dd152462e/1677097692612/bpe-backgroung.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    background-color: transparent !important;
    }

 

Thank you!!

Edited by AlessiaGarbarinoGraphics
Link to comment
On 2/23/2023 at 7:28 PM, AlessiaGarbarinoGraphics said:

Hello!  Back at it again with the same problem. (the transparent css not working) 

Can someone help me out on that? 

To recap I have a site-wide background image that doesn't show!

Link to website: https://www.bigpussyenergy.co/     (i've now replaced the "transparent" tag with a purple color)
And this is the css I have: 

.section-background, .page-section, .section-border {
    background-color: transparent !important;
}

body {
    background-image: url(https://static1.squarespace.com/static/62f16b998dcd805473a84699/t/63f67ada9bc5b97dd152462e/1677097692612/bpe-backgroung.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    background-color: transparent !important;
    }

 

Thank you!!

Change this code

.section-background, .page-section {
    background: transparent !important;
}

to this

.section-background, .page-section, .section-border, .section-divider {
    background: transparent !important;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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.