.category-header { height: 200px; position: relative; display: block; } .category-header::after { display: none; } .category-header h1 { color: #fff; z-index: 100; text-align: center; } .overlay { background-position: center; background-size: cover; position: relative; overflow: hidden; } .overlay:before { content: ''; position: absolute; width: 100%; height: 100%; background-color: #202225; opacity: 0.50; } 
 <div class="category-header overlay" style="background-image: url(https://image.ibb.co/hw7E6x/Blizzard_World.jpg)"> <h1>ВсС новости ΠΈΠ· ΠΌΠΈΡ€Π° overwatch</h1> </div>

I can't set the h1 tag to be on top of: before, z-index doesn't help

    2 answers 2

     h1 { z-index: 999; position: relative; } .category-header { height: 200px; position: relative; display: block; } .category-header::after { display: none; } .category-header h1 { color: #fff; z-index: 100; text-align: center; } .overlay { background-position: center; background-size: cover; position: relative; overflow: hidden; } .overlay:before { content: ''; position: absolute; width: 100%; height: 100%; background-color: #202225; opacity: 0.50; } 
     <div class="category-header overlay" style="background-image: url(https://image.ibb.co/hw7E6x/Blizzard_World.jpg)"> <h1>ВсС новости ΠΈΠ· ΠΌΠΈΡ€Π° overwatch</h1> </div>

    • In the question we are talking about the title belonging to a particular block. Why generalize? - Areshka

    Why not help?

     .category-header { height: 200px; position: relative; display: block; } .category-header::after { display: none; } .category-header h1 { color: #fff; z-index: 100; text-align: center; } .overlay { background-position: center; background-size: cover; position: relative; overflow: hidden; z-index: -2; } .overlay:before { content: ''; position: absolute; width: 100%; height: 100%; background-color: #202225; opacity: 0.50; z-index: -1; } 
     <div class="category-header overlay" style="background-image: url(https://image.ibb.co/hw7E6x/Blizzard_World.jpg)"> <h1> ВсС новости ΠΈΠ· ΠΌΠΈΡ€Π° overwatch </h1> </div>