Help make the picture opacity 0.6 so that the background-color is visible. Here is an example of what I need to do.

Example

Html

 <section class="banner"> <div class="container"> <div class="item"> <h1>We're an Independent Design and <span>Development</span> Agency</h1> </div> </div> </section>

Css

 .banner{ background: rgba(0,0,0, 0.6) url("../images/banner.jpg") no-repeat; background-size: cover; }

    4 answers 4

    Swap them and replace the background with a different background:

     html, body, div { height: 100%; margin: 0; } div { background: linear-gradient(to right, rgba(0,0,0,.6), rgba(0,0,0,.6)), url(https://i.stack.imgur.com/tgLtG.jpg); font-size: 6em; color: white; } 
     <div>Just a text</div>

    • Thank you very much helped))) - Arman Ghazaryan

    Put a blackout pseudo-element on top of the block with a picture in the background, do not forget to place the content on top of the pseudo-element.

     .bg { background: url(http://placeimg.com/500/300/any); width: 500px; height: 300px; position: relative; } .bg:after { position: absolute; content: ''; left:0; top:0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.5); } .bg__content { position: relative; z-index: 1; padding: 20px; color: #fff; } 
     <div class=bg> <div class=bg__content>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus sunt facilis incidunt laudantium perferendis numquam assumenda, blanditiis deserunt quisquam velit sit dolorem explicabo, nihil libero, voluptatibus nulla ullam! Aliquam, provident.</div> </div>

    • Oh, and I already posted the same :) - Qwertiy ♦
    • but I used to be) - Sasha Omelchenko

    You can use a pseudo-element with a negative z-index :

     html, body, div { height: 100%; margin: 0; } div { position: relative; background: rgba(0,0,0,.6); font-size: 6em; color: white; } div::before { content: ""; background: url(https://i.stack.imgur.com/tgLtG.jpg); position: absolute; left: 0; top: 0; right: 0; bottom: 0; z-index: -1; } 
     <div>Just a text</div>

    Make a translucent picture and save to png.

    The jpg format does not support transparency.

    • This is a pest-advice - save the background image in full screen in the png :) - Sasha Omelchenko
    • Shchas I will try thanks - Arman Ghazaryan
    • @SashaOmelchenko, well, not in the gif?))) - Qwertiy ♦