How to Add a Color Overlay to a Background Image Using CSS

There are two ways to add a color overlay to a background image.

One option requires using the background-image property with two values. The other option is to have a background-color property set with whatever color your heart desires, plus background-blend-mode: multiply.

Below are a couple of sample snippets of these options in CSS. I’ve also written a working example of these options on a CodePen.

Option 1

This option lets you set a color overlay on a background image in one property! This is my preferred method.

.option-1 {
	background-image: linear-gradient(
            rgba(0, 0, 0, 0.725),
            rgba(0, 0, 0, 0.725)
        ),
        url('http://placekitten.com/300/300');
	height: 300px;
}

Option 2

In option 2, you’ll need to set up three properties. Depending on you or your team’s preferences, this may be a preferred method. For example, even though there are more lines of code here, I can see the benefit of quickly having to “turn off” a color overlay by simply commenting out background-color and background-blend-mode.

.option-2 {
	background-color: rgba(0, 0, 0, 0.725);
	background-blend-mode: multiply;
	background-image: url('http://placekitten.com/300/300');
	height: 300px;
}

Categories