I added a div class=“pixel-overlay” after “header-image” and before "content"in header.php

.pixel-overlay {
display: block;
position: fixed;
left: 0;
top: 0;
overflow: hidden;
z-index: -99;
height: 100%;
width: 100%;
background: url(“mysite/pixel_overlay_1.png”) left top repeat

But it just effects when slides goes to change, and immediately disappear.
How can fix it?


Is it for the header slider? if yes, you can use the css pseudo-code instead. Here is the code:

.header-slider::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: red;
    z-index: 3;
    opacity: 0.3;

Thank you @Awan,

It works just with color, I need “dotted pattern image overlay” like this: 1px is black or white, and another one is transparent.


Also, this image or css code must be under text content in header-slider area


You just need to change the background-color: red; with background-image: url(YOUR_IMAGE_URL);


Thank you,

the problem is z-index,
z-index: 3; work but the image comes on top of all layers,
z-index:2; doesn’t work well.

I’ll try add a dive between slider and content, I hope it works

Yes, I am using z-index to displays the overlay to the top of the header image and then use the opacity to make it transparent.