Transparent Overlay Background Image Using CSS

With the help of CSS opacity or RBG color, We can easily add a transparent overlay background image. The opacity property allows specifying the transparency of an element.

But the RGB color values specify with RGB(red, green, blue) and when we addition opacity with RBG color, We can achieve transparent background color like RGB(red, green, blue, 0.5)

The value of  opacity property can be from 0.0 – 1.0. The upper value, the less transparent. We can implement opacity property itself or we can use it with RBG background color. Both work well with all modern browsers.

In this tutorial, I am going to experiment both of these. And also prepare a demo so you can check out how it works.

Note: IE8 and earlier use filter:alpha(opacity=x). The x can take a value from 0 – 100. A lower value makes the element more transparent.

A little drawback with Opacity method, It also transparent text over the background which is not good.

The RGB method is most recommended because it didn’t transparent the text over the background.

Transparent Overlay using Opacity Method:

To add a transparent overlay, We need to define two elements. The one holds the background image and other will have some text with opacity.

Let’s take a look the HTML code.

<div class="opacity-method">
  <div class="opacity-transbox">
    <p>This overlay make with the help of Opacity.</p>
  </div>
</div>

It’s simple and now move on CSS.

For background, We need to simply define the background-image and to make it responsive, we will take help of cover element. I also added a border for a little styling.

.opacity-method {
  background-image: url(image/overlay.jpg);
  border: 2px solid #15c6a7;
   -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

For the child div (Transparent Box) — We use the opacity element and set it 0.6. You can increase or decrease its value. Also, we here added background-color white.

As define above filter is used for older browser support.

.opacity-transbox {
  padding: 30px;
  background-color: #ffffff;
  opacity: 0.6;
  filter: alpha(opacity=60); /* For IE8 and earlier */
  height:260px;
}

Finally, We will style the p tag which holds the text.

.opacity-transbox p {
  margin: 5%;
  font-weight: bold;
  color: #000000;
}

Transparent Overlay using CSS RBG Method:

We are going to similar with HTML which we have done for Opacity Method. We define two divs, One for adding background-image and the second one for adding background overlay color.

<div class="rbg-method">
  <div class="rbg-transbox">
    <p>This is RBG method to add overlay.</p>
  </div>
</div>

Add the background-image and define background-size: cover; to make it work on mobile. You can add some height if you need.

.rbg-method {
  background-image: url(image/overlay.jpg);
  border: 2px solid #1932bc;
   -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  height:260px;
}

Now the game changer here. Instead of using opacity, We will simply use the RBG color with opacity value RGB(26, 100, 219, 0.5);.

.rbg-transbox {
   margin: 30px;
   background:rgb(26, 100, 219, 0.5);
   border: 1px solid #1932bc;
}

Lastly, We will need to style the p tag which will not go to affect with opacity and the font color will stay remain as it.

.rbg-transbox p {
  margin: 5%;
  font-weight: bold;
  color: #fff;
}

That’s It. We have completed transparent overlay background image using CSS. Check out demos for both method and implement one you like.

You Might Be Interested In: