Want to create a transparent color overlay over background image but want everything infront of overlay

Question

Basically, I want a background, then a transparent overlay, and then all of my content brought to the very front. So far I have

#overlay{
    position:absolute;
    left:0;
    right:0;
    top:0;
    bottom:0;
    background-color:grey;
    opacity:0.5;
    }

And I have a <div id="overlay"> surrounding everything in my html document. Thanks in advance.

Answer 1

This would be an easy way of doing it:

 body { width: 100%; height: 100%; } .content { position: relative; width: 500px; height: 500px; background-image: url('http://static.vecteezy.com/system/resources/previews/000/094/491/original/polygonal-texture-background-vector.jpg'); background-size: cover; } .overlay { position: absolute; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); } .inner-content { width: 250px; height: 250px; padding: 20px; background-color: #FFFFFF; margin: 50px 0 0 105px; color: #000000; } 

 <div class="content"> <div class="overlay"> <div class="inner-content">Your inner content</div> </div> </div> 

This sample has a lot of unnecessary code just to make the sample look nice but you should get the point.

Answer 2

I would use thepios answer but use :before to get rid of the unnecessary overlay div:

 body { width: 100%; height: 100%; } .content { position: relative; width: 500px; height: 500px; background-image: url('http://static.vecteezy.com/system/resources/previews/000/094/491/original/polygonal-texture-background-vector.jpg'); background-size: cover; padding: 50px; } .content:before{ content: ' '; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); } .inner-content { width: 250px; height: 250px; padding: 20px; background-color: #FFFFFF; color: #000000; position: absolute; } 

 <div class="content"> <div class="inner-content">Your inner content</div> </div>