Color Overlay on Background Image Not Working

[toad78]

Running into a problem getting :before and :after to work as a color overlay on this page.

I’m using:

#wysiwyg_widgets_widget-8 {
	background-image: url(img/tempest-tech-positive-pressure.jpg);
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-position: 0 0;
	background-size: cover;
	z-index: 1!important
}
#wysiwyg_widgets_widget-8:before, #wysiwyg_widgets_widget-8:after {
	background: rgba(255, 255, 255, 0.4) none repeat scroll 0 0 !important;
    bottom: 0 !important;
    content: "" !important;
    left: 0 !important;
    pointer-events: none !important;
    position: absolute !important;
    right: 0 !important;
    top: 0 !important;
    z-index: 2 !important;
}

I’m looking to put a 40% white overlay on the image.

[toad78]

Okay, I’ve managed to fix it by adding another container around the content and applying the overlay to that container, plus adding z-index value to the content layer. Worked just fine!

#wysiwyg_widgets_widget-8 {
	position: relative;
	background-image: url(img/tempest-tech-positive-pressure.jpg);
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-position: 0 0;
	background-size: cover;
	z-index: 1!important
}
#wysiwyg_widgets_widget-8 #overlay:before, #wysiwyg_widgets_widget-8 #overlay:after {
	background: rgba(255, 255, 255, 0.4) none repeat scroll 0 0 !important;
    bottom: 0 !important;
    content: "" !important;
    left: 0 !important;
    pointer-events: none !important;
    position: absolute !important;
    right: 0 !important;
    top: 0 !important;
    z-index: 2 !important;
}
.widget .container {
    position: relative;
    z-index: 10 !important;
}

[SamA74]

I was just about to say, the part missing from your first code example is:-

position: relative;

to make the absolute positioning work, but you have that now.