The task is to create a div class, the image is a background, its height depends on the content. I will name this block - Main. Next: the second div is a black color with translucency to darken the main unit. I will name it - Fading. I managed to impose it, but here the problem is obscured and the text that is inside the Main unit. I tried to enter the text inside the Dimming block, but in this case the Main block does not stretch along the height of the contents. Looking for a whole day, I think how to solve this problem. It is necessary that the text was in the uppermost layer and the image is dark. Now what:

.main { background-image: url('images/background.jpg'); z-index: 1; background-size: 100% 100%; position: relative; color: white; font-size: 14px; text-align: center; } .blackout { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-color: rgba(0, 0, 0, 0.5); z-index: 10; width: 100%; height: 100% ; } <div class="main"> <div class="blackout"></div> </div>
  • Eugene, can you answer my comment in your last question? - MaximLensky
  • Have not seen. Excuse me. I'll see now. - Evgeny Kalayda
  • two answered - didn’t understand what was the point here? - MaximLensky
  • I do not quite understand what role it is in this case: before? Creates an extra layer on top of the image? - Eugene Qalaida February
  • one
    before / after work only with empty / filled content = "" and play the role of a pseudo-element ... that is, in other words, this is a regular block and in the codepen I showed how it looks but you can stylize it and use it like a normal div - MaximLensky

2 answers 2

Example

 .bg { z-index: 1; background-image: url('https://www.popsci.com/sites/popsci.com/files/styles/1000_1x_/public/images/2018/06/edinburgh_meadows_2008_middle_meadow_walk_by_catharine_ward_thompson.jpg?itok=ysmDaSjD&fc=50,50'); background-size: 100% 100%; position: relative; color: white; font-size: 14px; text-align: center; position: relative; min-height: 100vh; } .bg:before { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-color: rgba(0, 0, 0, .5); z-index: 10; width: 100%; height: 100%; } .content { position: relative; z-index: 11; font-size: 25px; } 
 <div class="bg"> <div class="content"> text </div> </div>

  • Thank you very much. And can you briefly explain what it means: before and specifically empty content = ''; Does this mean it applies to all content? - Eugene Qalaida February
  • In this case, the pseudo-element is used to make the html markup cleaner, also the pseudo-element without content: ""; will not work. - soledar10

 .main { background-image: url('https://www.dike.lib.ia.us/images/sample-1.jpg/image'); background-size: 100% 100%; position: relative; color: white; font-size: 14px; text-align: center; } .main:before { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-color: rgba(0, 0, 0, 0.5); } p { position: relative; color: white; } 
 <div class="main"> <p>Учимся работать с псевдоэлементами</p> <p>Учимся работать с псевдоэлементами</p> <p>Учимся работать с псевдоэлементами</p> <p>Учимся работать с псевдоэлементами</p> <p>Учимся работать с псевдоэлементами</p> <p>Учимся работать с псевдоэлементами</p> <p>Учимся работать с псевдоэлементами</p> </div>
Option without z-index

  • And if instead of <p> there will be something else? And what the empty content means: ""; ? - Eugene Qalaida February
  • content: ''; and : before \: after . Instead of p you want something and do it, this is just an example. most importantly do not forget the element that will instead put p position position relative - Nilsan February
  • I do not understand why then the text on top superimposed did not become transparent? After all, it was applied to the parent - Eugene Qalaida February
  • I do not understand what you are talking about .... :-( - Nilsan
  • before: in this case created an extra layer? or am I misunderstanding something? - Eugene Qalaida