How to add a color overlay to a background image?
CssBackground ImageBackground ColorCss Problem Overview
I have seen this question a lot both on SO and the Web. But none of them has been what I am looking for.
How do I add a color-overlay to a background image using CSS only?
Example HTML:
<div class="testclass">
</div>
Example CSS:
.testclass {
background-image: url("../img/img.jpg");
}
Please note:
-
I want to solve this by only using CSS. i.e I do NOT want to add a child div within the div "testclass" for the color overlay.
-
This should not be a "hover effect" I want to simply just add a color-overay to the background image.
-
I want to be able to use opacity i.e. I am looking for a solution that allows RGBA color.
-
I am looking for just one color, lets say black. Not a gradient.
Is this possible? (I would be surprised if not, but I have not been able to find anything about this), and if so what the best way to accomplish this?
All suggestions and advice are appreciated!
Css Solutions
Solution 1 - Css
I see 2 easy options:
- multiple background with a translucent single gradient over image
- huge inset shadow
gradient option:
html {
min-height:100%;
background:linear-gradient(0deg, rgba(255, 0, 150, 0.3), rgba(255, 0, 150, 0.3)), url(http://lorempixel.com/800/600/nature/2);
background-size:cover;
}
shadow option:
html {
min-height:100%;
background:url(http://lorempixel.com/800/600/nature/2);
background-size:cover;
box-shadow:inset 0 0 0 2000px rgba(255, 0, 150, 0.3);
}
an old codepen of mine with few examples
a third option
- with background-blen-mode :
> The
background-blend-mode
CSS property sets how an element's background images should blend with each other and with the element's background color.
html {
min-height:100%;
background:url(http://lorempixel.com/800/600/nature/2) rgba(255, 0, 150, 0.3);
background-size:cover;
background-blend-mode: multiply;
}
Solution 2 - Css
You can use a pseudo element to create the overlay.
.testclass {
background-image: url("../img/img.jpg");
position: relative;
}
.testclass:before {
content: "";
position: absolute;
left: 0; right: 0;
top: 0; bottom: 0;
background: rgba(0,0,0,.5);
}
Solution 3 - Css
background-image
takes multiple values.
so a combination of just 1 color linear-gradient and css blend modes
will do the trick.
.testclass {
background-image: url("../images/image.jpg"), linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5));
background-blend-mode: overlay;
}
note that there is no support on IE/Edge for CSS blend-modes at all.
Solution 4 - Css
Try this, it's simple and clear. I have found it from here : https://css-tricks.com/tinted-images-multiple-backgrounds/
.tinted-image {
width: 300px;
height: 200px;
background:
/* top, transparent red */
linear-gradient(
rgba(255, 0, 0, 0.45),
rgba(255, 0, 0, 0.45)
),
/* bottom, image */
url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/owl1.jpg);
}