How to add background-color overlay to a div?

Question

I have two empty div elements inside a div. The two elements are class labeled as "img" and "overlay". On the "img" I attached a background url and the "overlay" I only want to add a background color on top of the background url adding an overlay effect.

I tried playing with positions, height and padding but it only misalign the items. The divs are inside another div which has a grid display property.

Html Part:

<section id="grid">
   <div class="main">
       <div class="img"></div>
       <div class="overlay"></div>
   </div>
</section>

Css Part:

.img{
  height: 100%;
  width: 100%;
  background: url("../img/star.jpg");
  background-size: cover;

}

.overlay{
  background-color: green;

}

score 1 · Answer 1 · answered Dec 20 '20 at 04:03

To create an overlay, you can use z-index property and background transparency.

div {
  height: 200px;
  width: 300px;
  position: relative;
  margin: 1em;
}

h2 {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.image {
  background: url(https://images.unsplash.com/photo-1606145469859-bd36ede24638?crop=entropy&cs=srgb&fm=jpg&ixid=MXwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHw&ixlib=rb-1.2.1&q=85);
}

.overlay {
  background: url(https://images.unsplash.com/photo-1606145469859-bd36ede24638?crop=entropy&cs=srgb&fm=jpg&ixid=MXwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHw&ixlib=rb-1.2.1&q=85);
  opacity: 0.7;
  z-index: 20;
}

<div class="box">
  <div class="image"></div>
  <h2>Image</h2>
</div>
<div class="box">
  <div class="overlay"></div>
  <h2>Overlay</h2>
</div>

You must put the text outside the overlay div. Then you can apply a higher z-index to the div to bring it to the front. Remember to make the background partially transparent, otherwise, the text will be invisible.

score 0 · Answer 2 · answered Dec 20 '20 at 03:16

If you want the .overlay div to go on top of the image div, one option is to use absolute positioning. If that's the case, you also want to enable some transparency on your overlay if you want it to be like an image effect.

.overlay {
  position: absolute;
  height: 100%;
  width: 100%;
  background-color: #00ff00aa;
}

How to add background-color overlay to a div?

2 Answers2