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!
This question is related to
css
background-image
background-color
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);
}
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.
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);
}
Source: Stackoverflow.com