CSS3 Semi Transparent Layer Over Background Image

Sometimes, when building a website, we want our background image to be a little more darker and the first thing that comes in mind is the use of Photoshop. It can take you a good amount of time to modify the image.

The other way that comes in mind is to create a child div inside the div that contains background. Set it to absolute positioning and left,bottom 0 to stretch all over its parent div.

Why do all this when you can do it with a single line of code using CSS3. Below i have provided a  screenshot where i have used CSS3 to make the following example:

Add a Semi Transparent Layer Over Background Image with CSS3

If you like the screenshot above you can download the template for free here.

Css Code:

background: linear-gradient(rgba(0,0,0,.5), rgba(0,0,0,.5)), url(background.jpeg);

The above CSS3 code sets the background image in the specified div and over the background adds a black layer with transparence of 0.5.

Leave a reply