[paper_pusherParticipant]

I want to add a semi-transparent color overtop of a selection of my full-width background images and videos. Doing so should allow the white text to stand out. I have attached a sample of what I want from the Integrity Theme.

I’ve tried a handful of fixes suggested in this forum, but none of them appear to work. I can add a colored (semi-opaque) background to a column, but it’s restricted by the container – which means that the background image sticks out the side. (see attached).

My site is currently hidden behind a “coming soon” page, but it’s at: http://www.jpking.ca and uses the most recent version of X Theme and Cornerstone.

Thank you!

[LelyModerator]

Hi There,

Thanks for posting in. Please check this thread:https://community.theme.co/forums/topic/overlay-transparent-color-over-background-image/#post-318729

Hope this helps.

[paper_pusherParticipant]

This reply has been marked as private.

[JoaoModerator]

Hi There,

Update this:

.section-overlay {
  content: ' ';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-color: rgba(0,0,0,.5);
   width: 100%;
  height: 100%;

}

to this:

.section-overlay {
  content: ' ';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-color: rgba(0,0,0,.5);
  width: 100%;
  height: 100%;
  z-index: 2;
 
}

And inside the Style Box in Cornestone on the bottom of your text-element you will need to add:
z-index: 3;

That way your Text will be over the background layer.

Hope it helps,

Joao

[paper_pusherParticipant]

That kind of fixed it, but not really. While that new code keeps the colour in place, I can’t seem to get the text element to jump above the semi-transparent layer, even when using “z-index: 3;”

I also still can’t seem to trigger the ID “x-section-1” on any of the other sections. Any thoughts?

Thanks!

[JadeModerator]

Hi there,

Please update the code:

<span style="color: #f7ddde;">Hi, I’m Jp King</span>

to

<span style="color: #f7ddde;z-index: 9999;position: relative;">Hi, I’m Jp King.</span>

and add a position: relative; CSS to the h2 text below the heading.

Hope this helps.

[paper_pusherParticipant]

The new css code has fixed the layer issue in which the text was behind the section overlay. However, I still can’t seem to apply the overall effect to more than one section per page.

In playing with the code a little I can apply it to the entire page or only the first section. I want to be able to apply this feature to multiple sections throughout the site: (1,4,6,8,10,12,15,17).

Thanks!

[LelyModerator]

Hi There,

To apply it to specific section, we need to adjust this code:

jQuery(function($){
$( "#x-section-1" ).prepend( "<div class='section-overlay'></div>" );
});

To this:

jQuery(function($){
$( ".x-section-with-overlay" ).prepend( "<div class='section-overlay'></div>" );
});

Then please add x-section-with-overlay on each of those section’s class field where you want the overlay to be applied.

Hope this helps.

[paper_pusherParticipant]

Hi Lely,

Thank you for this. I’ve switched out the js code but that seems to make everything stop working altogether rather than trigger specific sections. So, no success.

I am totally stumped here. It seems like this “background colour overlay” is a common request from customers (many forum subjects about it) and yet each individual solution seems to be entirely different. While I’m no code-whiz I do understand the basics and I’ve played with the logic of it all for some time with no real success. Is there something overriding the changes we are trying to make here?

[Nabeel AModerator]

Hi again,

It seems to be working fine on the first section. Are you manually adding x-section-1 ID to each section? Please remove it, this could cause conflicts in the page. The above code should work properly if you’re adding x-section-with-overlay class to the sections where you need the overlay.

Hope this helps!

[paper_pusherParticipant]

Hello,

So, this still is not working.

I am using the following code:

.section-overlay {
  content: ' ';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-color: rgba(0,0,0,.5);
  width: 100%;
  height: 100%;
  z-index: 2;
 
}

And custom JS:

jQuery(function($){
$( ".x-section-with-overlay" ).prepend( "<div class='section-overlay'></div>" );
});

And I have input “x-section-with-overlay” on each of the section’s class field where I want the overlay to be applied. But all of this is not working. Instead, it has applied a solid grey layer overtop of the whole website.

I am still stumped. Let me know if you might have an alternate solution to this problem.

Thanks!

[Paul RModerator]

Hi,

To fix it, please add this in your Custom > Edit Global CSS in the customizer.

body .x-section.bg-image {
    position: relative;
}

Hope that helps.

[paper_pusherParticipant]

Wow! Alas, this is fixed. Thank you so much for all your help. I’m quite happy as of right now!

[JoaoModerator]

Great to hear it

Let us know if you need help with anything else.

Joao

[Author]

Posts