There should be a picture, gradient, and text on top of it all. I can’t do it in any way, I try different techniques, nothing works.

.header { height: 670px; width: 100%; background-image: url(../img/header_bg.png); background: linear-gradient(to right, rgba(9, 5, 47, .85) 0%, rgba(49, 29, 94, .85) 100%); }

    2 answers 2

    linear-gradient is an image, so images (background and gradient) must be comma-separated

     .header { height: 670px; width: 100%; background-image: linear-gradient(to right, rgba(9, 5, 47, .85) 0%, rgba(49, 29, 94, .85) 100%), url(../img/header_bg.png); }

    Further, if I understood correctly about the issue with the text, then:

    Create a block and assign it such a class, filling the text with an example:

     <div class="header"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris enim enim, semper sed libero placerat, venenatis eleifend velit. Aliquam imperdiet nunc in libero condimentum viverra. Quisque eu est et mauris pellentesque vulputate. Curabitur posuere sollicitudin urna id malesuada. Vivamus tincidunt tristique diam, id porttitor neque tempor at. Quisque eget enim in tortor scelerisque vehicula vel eget justo. Nunc rutrum iaculis tortor at porttitor. </div>

    JSFiddle example .

    • wrote a gradient after the image, but it is not displayed. He is behind the picture - PolonskiyP
    • @PolonskiyP need to change the order, first the gradient, then the picture. Corrected the answer. - Legionary
    • thanks, it worked - PolonskiyP

    Absolutes:

     .header { height: 670px; width: 100%; background: url(https://upload.wikimedia.org/wikipedia/commons/b/bf/Blue_Tiger_Im_IMG_9450.jpg) center no-repeat; -webkit-background-size: cover; background-size: cover; position: relative; z-index: 1; } .header:after { content: ''; position: absolute; top: 0; left: 0; bottom: 0; right: 0; z-index: 2; background: linear-gradient(to right, rgba(9, 5, 47, .85) 0%, rgba(49, 29, 94, .85) 100%); } .text { position: absolute; top: 0; left: 0; bottom: 0; right: 0; z-index: 3; text-align: center; } .text p { color: #fff; font-size: 2rem; } 
     <div class="header"> <div class="text"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi, eos?</p> </div> </div>

    PS: Your example does not work due to a background conflict.

    • in fact, I had a picture first, and then a gradient. Swapped and everything worked. - PolonskiyP