Docs

[Bill K]

hi guys,
I’ve a section with a background video. But I also want to add a layer of transparency above it to darken/tint it a bit (rgb (0,0,0,.4).

But I’m not getting the results I need, as when I add this code to the page CSS, I can’t get the content elements (headlines, buttons, etc) on top of the tint.

#x-section-1 {
    position: relative;
    overflow: hidden;
}

#x-section-1:before {
    content: " ";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #00ff00;
    background-color: rgba(0,0,0,0.4);
  	z-index: -1;
}

.x-section-1.bg-video { 
  z-index: 0; 
} 

Advice?

http://crookedtrails.digitalfarm.com/

[Jade]

Hi there,

Please try this code:

#x-section-1 {
    position: relative;
    overflow: hidden;
}

#x-section-1 .x-container {
    z-index: 999;  
}

#x-section-1:before {
    content: " ";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #00ff00;
    background-color: rgba(0,0,0,0.4);
    z-index: 99;
}

.x-section-1.bg-video { 
  z-index: 0; 
}

Hope this helps.

[Bill K]

Worked great, thank you. So it looked like this litte bit was the key difference:

#x-section-1 .x-container {
    z-index: 999;  
}

[Prasant Rai]

You are most welcome. 🙂

[Author]

Posts