Biscuitnapper Posted February 27, 2021 Share Posted February 27, 2021 (edited) 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. The page is here: https://www.bcaexhibits.org/objects-revealed-1 Password: ObjectsRevealed_21 Any suggestions for how to tackle this? Thanks! Edited February 28, 2021 by Biscuitnapper Wanted to add further examples of code I have tried out since I initially posed the question. Link to comment
tuanphan Posted March 2, 2021 Share Posted March 2, 2021 Hi. The url doesn't exist. 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
Biscuitnapper Posted March 2, 2021 Author Share Posted March 2, 2021 @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
Biscuitnapper Posted March 3, 2021 Author Share Posted March 3, 2021 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; } tuanphan 1 Link to comment
tuanphan Posted March 6, 2021 Share Posted March 6, 2021 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? Biscuitnapper 1 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
Biscuitnapper Posted March 11, 2021 Author Share Posted March 11, 2021 On 3/6/2021 at 10:45 PM, tuanphan said: I see footer tablet doesn't look good. Do you want to fix this? 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
Kalie-Isaacs Posted February 28 Share Posted February 28 Is this css still accurate? It seems to not be working for me. Link to comment
tuanphan Posted March 2 Share Posted March 2 On 2/29/2024 at 12:37 AM, Kalie-Isaacs said: Is this css still accurate? It seems to not be working for me. New CSS should be .section-background, .section-border { background-color: transparent !important; } If the code doesn't work, you can share link to page where you want to apply the code, we can check easier 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
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment