CODEWITHSUNDEEP
htmlcss
Ethan
Ethan

Reputation: 11

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

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.

Upvotes: 0

Views: 189

Answers (2)

Wavemaster
Wavemaster

Reputation: 1814

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>

Upvotes: 1

thepio
thepio

Reputation: 6263

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.

Upvotes: 2

Related Questions