Now many sites use this blackout, but I have not found how to do it. For example, the header has a picture on the background, and a text on top of it. But in order to read the text, a translucent black background, such as a background, is superimposed over the image. How to make it? For header there are such properties:

header { height: 538px; width: 100%; background: url(../img/header-bg.png) no-repeat center center; background-size: cover; }

6 answers 6

This is the answer to your question:

 background: linear-gradient( rgba(255, 255, 255, 0.8), rgba(0, 0, 0, 0.5) ), url('/img/back/home-back.jpg'); background-repeat: no-repeat; background-size: cover; background-attachment: fixed; background-position: top;

    eg:

     header { position: relative; background: url(https://amazingcarousel.com/wp-content/uploads/amazingcarousel/3/images/lightbox/golden-wheat-field-lightbox.jpg) center no-repeat; -webkit-background-size: cover; background-size: cover; } header:after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,.5); z-index: 2; } .inner { position: relative; z-index: 3; color: #fff; text-align: center; padding: 50px; } 
     <header> <div class="inner"> <h1>Lorem ipsum dolor.</h1> <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis, eligendi.</span> </div> </header>

      Add a black background fill and opacity: значение от 0 до 1; for this background. Example: opacity: 0.5;

      • Does not work. Applies or background image, or color. But not together. background: url (../ img / header-bg.png) no-repeat center; background-color: rgba (0, 0, 0, 0.8); - PolonskiyP

      Can be done using a pseudo-element. The code will be something like this:

       header { height: 538px; width: 100%; background: url(../img/header-bg.png) no-repeat center center; background-size: cover; position: relative; } header:after{ content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: black; opacity: 0.5; z-index: 1; } .content{ position: relative; color: white; z-index: 2; } 
       <header> <div class="content"> тут контент </div> </header>

        To impose a translucent block with rgba background (where the 4th parameter is transparency) and with absolute positioning. HTML:

         <div class="header"> <div class="cover"></div> <div class="content"></div> </div>

        CSS:

         .header{ position: relative; } .cover{ background: rgba(0, 0, 0, 0.8); position: absolute; top: 0; bottom: 0; left: 0; right: 0; } .content{ position: relative; z-index: 2; }
        • great simple option, but it darkens all the rest of the content, and for some reason the z-index is not regulated ... - PolonskiyP
        • Edited, I think so clearer. We put a block on top. - dima_bur

        RGBA ();

        for example, background-color: rgba(0, 0, 0, 0.5);