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:
If you like the screenshot above you can download the template for free here.
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.
© 2020 www.focusoncode.com