Class bg-overlay no longer working

[MalFranz]

Hello,

I downloaded and used the non-profit sample site for my website. There is a class that should a dark overlay (bg-overlay) to my images, but it is no longer working even though I have no edited that portion of my CSS. Please advise. I will include my login credentials in a private message.

[nabeel]

Hi @Magnifyre,

Thank you for reaching out to us. To make your class section-bg-overlay work, please replace your code with the following:

.section-bg-overlay {position: relative;}
.section-bg-overlay:before {
 	position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  content: '';
  display: block;
}

Now you can assign this class section-bg-overlay to your sections to have a dark overlay. Here are some related links for further reading, this could help you in finding and implementing some CSS fixes:

• Intro to CSS - https://goo.gl/mFuWQT
• How to get CSS selectors - https://goo.gl/BmoH39
• Get Started With Viewing And Changing CSS - https://goo.gl/7xFhDa
• CSS Media Queries - https://goo.gl/L3ZHNg

Don’t forget to clear all caches including your browser’s cache after adding the code. Let us know how this goes!

[MalFranz]

@Nabeel

.section-bg-overlay {position: relative;}
.section-bg-overlay:before {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
content: ‘’;
display: block;
}

That worked! Thank you so much.

[christian]

You’re welcome. Glad we’re able to help.