How to put a dark layer on a background image (overlay) with CSS3?

Today we are going to see how to put a dark layer with CSS3 to a background image (overlay) so that it contrasts with the elements that we have on top.

This option is only with CSS3, without using JavaScript or anything that complicates our lives.

Step 1:

We look for our container that has the background image

If we had put the HTML ourselves we will go much faster, because we would already know which class or id to point to.

If you did it with a visual layout artist, we just inspected from our favorite browser and looked for the ID or Class that we need.

Another option is to put the class from the wordpress editor

Step 2

We give styles to the background.

figure.img-fondo {
	position: relative;
}

With the position: relative property we will indicate the pseudo-element that we will create in a moment that does not leave our container .img-background.

Step 3 CSS3 dark layer to a background image (overlay)

Now what we will do is apply the styles to the pseudo-element: before, which does nothing more than add content “before” our container with a background, to move its opacity a bit and thus darken the background. The CSS code we will need will be the following:

figure.img-fondo:before {
	content:'';
	position: absolute;
        top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background-color: rgba(0,0,0,0.6);
}

This is where we are giving it all the values ​​so that our layer is stretched and we are giving it color with an opacity of 0.6. You can play with these values ​​depending on the type of design you have.

And when you ask yourself how to put a dark layer with CSS3 to a background image (overlay), you will already know the answer! A greeting.





Comparte para enseñar a otros

Leave a Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.