Background images not appearing, apparently a coding issue

our images on our site are currently gray. this has happened before and it was an issue with the custom coding and squarespace updates messing each other up.

Can I safely remove the coding from our site? I feel like this would solve this issue for good... here is our code. I Have not learned much about code so I'm rather lost.

i contacted squarespace and this is what they said-

Alright, it looks to be the custom code implemented into the site, is causing this behavior with the gray overlay. When I set the site on Safe mode, which disables all code placed in the CSS panel, Code blocks, and Code injection, the image displayed. Here's a video of that behavior: https://share.squarespace.com/E0uX5D2q

You're more than welcome to incorporate custom CSS in your site. As a note, we're unable to offer assistance or troubleshooting for such modifications or additions, due to their complex nature. Additionally, with a code-based solution, we can’t guarantee its functionality or full compatibility with Squarespace. You'll need to troubleshoot your code to determine why it's causing this behavior with our features.  That said, while our team here is unable to support our customers in this specific way, we have the following resources that provide further information on how you can use code on our platform and goes further into restrictions by website plan

Can I safely remove the coding from our site? I feel like this would solve this issue for good... here is our code. I Have not learned much about code so I'm rather lost.

//code.jquery.com/jquery-3.6.1.min.js">

// Stretchy Navigation Line - v2 //

.header-nav-item::after {
  content: '';
  background: #000000; //color
  height: 1px; //thickness
  width: 0;
  display: block;
  margin-top: .05px !important;
  transition: width 0.5s; //animation speed
  margin: 0 auto;
}

.header-nav-item:hover::after {
  width: 100%;
}

.header-nav-item--active a {
    background-image: none !important;
}

// Active Nav Color //

.header-nav-item--active a {
  color: #000000 !important;
  border-bottom: 1px solid #FFFFFF !important;
  background-image: none !important;
}

// Fading Folder Nav //

.header .header-nav .header-nav-item--folder .header-nav-folder-content {
  transition: ease-in-out 0.5s;
}

// Spotlight Navigation Folder Style //

.header-nav-folder-content:hover > .header-nav-folder-item {
  opacity: 0.5;
}

.header-nav-folder-content:hover > .header-nav-folder-item:hover {
  opacity: 1.0;
}

// Expanding Button On Hover //

.sqs-block-button .sqs-block-button-element--medium {
    transition: transform 0.3s !important;
}
  
.sqs-block-button .sqs-block-button-element--medium:hover {
    opacity: 1 !important;
    transform: scale(1.1) !important;
}

SS is at it again by changing their code which messes with transparent backgrounds.

I just want [data-section-id = "622e5b8ddd586822ec87dd31"] to be transparent to show the section beneath, but I can't figure it out since the change this morning.

So far the code below is the only luck I've had if I change the background to anything other than transparent it will change the color.

.page-section[data-section-theme="black"] .section-background {
  background-color: transparent !important;
}

Hope anyone can help!

the section-background div is now wrapped in a section-divider div which also has the background color set. so if you want to see through the section then you'd need to set both of those to transparent. obviously this only works if you've set the theme of that section to "Darkest 1" which is interpreted as "black" in the attributes...

.page-section[data-section-theme="black"] .section-divider,
.page-section[data-section-theme="black"] .section-background {
  background-color: transparent !important;
}

I'm not entirely sure what you'd see though? you'd just see through to the site's background colour. maybe you've got some other code to stack sections on top of each other.

8 hours ago, iamdavehart said:

the section-background div is now wrapped in a section-divider div which also has the background color set. so if you want to see through the section then you'd need to set both of those to transparent. obviously this only works if you've set the theme of that section to "Darkest 1" which is interpreted as "black" in the attributes...

.page-section[data-section-theme="black"] .section-divider,
.page-section[data-section-theme="black"] .section-background {
  background-color: transparent !important;
}

I'm not entirely sure what you'd see though? you'd just see through to the site's background colour. maybe you've got some other code to stack sections on top of each other.

It's still not quite working. The theme is set to darkest, but the images that beneath the section still don't show through.

@noahawaii 

ok, I've found your website now. (much easier if you post details of it with the question. also probably better to start a new post as this one has already been marked as a solution to something different). it's a bit different. this is down to Squarespace introducing fancy dividing sections and the css depends on how each section is set up.

.page-section[data-section-theme="black"] .section-border,
.page-section[data-section-theme="black"] .section-background {
  background-color: transparent !important;
}

also, if it's going to be transparent you don't need the "black" stuff. you might as well just put in the data section id you're dealing with...

.page-section[data-section-id="622e5b8ddd586822ec87dd31"] .section-border,
.page-section[data-section-id="622e5b8ddd586822ec87dd31"] .section-background {
  background-color: transparent !important;
}

45 minutes ago, iamdavehart said:

@noahawaii 

ok, I've found your website now. (much easier if you post details of it with the question. also probably better to start a new post as this one has already been marked as a solution to something different). it's a bit different. this is down to Squarespace introducing fancy dividing sections and the css depends on how each section is set up.

.page-section[data-section-theme="black"] .section-border,
.page-section[data-section-theme="black"] .section-background {
  background-color: transparent !important;
}

also, if it's going to be transparent you don't need the "black" stuff. you might as well just put in the data section id you're dealing with...

.page-section[data-section-id="622e5b8ddd586822ec87dd31"] .section-border,
.page-section[data-section-id="622e5b8ddd586822ec87dd31"] .section-background {
  background-color: transparent !important;
}

 

That did it thank you!

Also there's somebody else having the same problem because of the change. Last time it was a whole mess of people.