Jump to content

How can I set section backgrounds to be transparent so the background image shows through?

Recommended Posts

Site URL: https://www.bcaexhibits.org/objects-revealed-1

I am trying to add a background image to certain pages on a website, and whilst I finally found the easy way to do this,  the main issue is that the content sections cover up the image. I want to be able to set the section backgrounds to transparent so that the background image shows through (I will add background colours to specific blocks).

When experimenting in chrome inspector, the following worked:

:not(.has-background) .section-background {
background-color: transparent;
}
 
EDIT: I have also tried getting very specific with classes. So for example in the inspector the following also worked on a section:
 
section.page-section.layout-engine-section.background-width--full-bleed.section-height--medium.content-width--medium.horizontal-alignment--center.vertical-alignment--middle.has-background.bright-inverse {
    background-color: transparent !important;
}
 
But on the actual page itself, this does nothing - the sections still have an underlying background that covers the background image, even when I have tried adding a transparent/low opacity .png image as a section background.
 
Password: ObjectsRevealed_21
 
Any suggestions for how to tackle this? Thanks!
 
Edited by Biscuitnapper
Wanted to add further examples of code I have tried out since I initially posed the question.
Link to comment

@tuanphan

The url is now: https://www.bcaexhibits.org/objects-revealed-styling-test, password: ObjectsRevealed_21

As you can see, I've been trying an alternative route where I treat the background image to the section as I would to the body element. However, this isn't working either - I want the image to repeat but nothing I'm doing seems to effect the actual background of the section.

Even though I'm trying this other route, ideally, I would still rather set section backgrounds to transparent as it helps with design consistency and also keeps the content structure better defined.

Link to comment
On 3/3/2021 at 8:18 AM, Biscuitnapper said:

This issue has now been solved using the id of the data section attribute like so:

[data-section-id="123a456b789101112cde1fg31"] { background-color:transparent !important; }

[data-section-id="123a456b789101112cde1fg31"] .section-background { background-color:transparent !important; }

I see footer tablet doesn't look good. Do you want to fix this?

image.thumb.png.0e1abf921afffe0a5950c0fdce823594.png

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
On 3/6/2021 at 10:45 PM, tuanphan said:

I see footer tablet doesn't look good. Do you want to fix this?

image.thumb.png.0e1abf921afffe0a5950c0fdce823594.png

Sorry for my late reply, I've been a bit under siege with data entry and styling details 😅. Thank you for pointing that out - unfortunately this isn't my website so I don't want to make any changes beyond the section I'm working on 🙂

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.