Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

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


Biscuitnapper

Question

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 post
  • Answers 5
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

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

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

Posted Images

5 answers to this question

Recommended Posts

  • 0

@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 post
  • 0

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; }

Link to post
  • 0
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

Link to post
  • 0
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 post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...