How to Overlay Image With Color in CSS

1. Use the rgba() Function to Overlay Background Image With Color in CSS
2. Use the linear-gradient Function to Overlay Background Image With Gradient in CSS
3. Use the background-blend-mode Property to Overlay Background Image With Gradient in CSS

This article will introduce a few methods to overlay an image with color in CSS.

Use the rgba() Function to Overlay Background Image With Color in CSS

We can use the rgba() function to create a color overlay over an image. We can use the function as the value of the background property.

The syntax of the rgba() function looks like this.

rgba(red, green, blue, opacity);

Here red, green and blue color is set to a value between 0-255 and an opacity ranging from 0-1. If the value of opacity is set to 0, then it is completely transparent, and if the value of opacity is set to 1, it will be completely opaque.

We can create an overlay simply by adding a color above an image, decreasing its opacity.

For example, create a div tag and give it an id main. Then, create a div inside the header and give it a class overlay.

Next, create a paragraph p and write some text. In CSS, set the background image to the main id such that, background: url("") no-repeat fixed.

The background-repeat property is no-repeat, and the background-position property is fixed. Next, give the div the height of 100% to adjust its height according to the content.

Set the overflow property to hidden to hide the content overflowing from the container. Also, set the color to white to make the text more visible.

Finally, set the position property to absolute.

Next, we must create an overlay by styling the overplay div. Give it a background-color along with opacity such that background: rgba(50, 70, 80, 0.7);.

Set the height property to 100% to match the height of its parent element. Set the overflow property of div to hidden as above.

The example below shows that the div with the class name of overlay appears over the main div. As the div has a transparent background color, the background image is visible.

Example Code:

<div id="main">
 <div class="overlay">
 <p>
 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
 </p>
 </div>
</div>

#main {
 background: url("/img/DelftStack/logo.png") no-repeat fixed;
 height: 100%;
 overflow: hidden;
 color: #FFFFFF;
 position: absolute;
}

.overlay {
 background: rgba(50, 70, 80, 0.7);
 overflow: hidden;
 height: 100%;
}

Use the linear-gradient Function to Overlay Background Image With Gradient in CSS

A linear gradient is a CSS function that creates a colorful image of a progressive transition between two or more colors along a straight line. Different colors are mixed up and different directions to create a colorful pattern.

We can use linear-gradient as background color, and it can also be used as an image overlay. However, to use it as an image overlay, we have to use it with the background image.

Colors with lower opacity should be linear-gradient to make the background image visible.

The first parameter of the linear-gradient function is the direction of the gradient. After it, we can specify the color stops according to our needs.

For example, create a div with an id main. Select the id in CS and set the height and width of the container as 100vh and 100%.

Then set linear gradient and background image using background shorthand property. Write the linear-gradient property and use the to right direction as the first parameter.

Next, use the rgba() function, to specify the gradient. Write the rgba(50, 70, 80, 0.7) as the first color stop add rgba(30, 20, 150, 0.7) as the second color stop.

After the linear-gradient function, use the url() to insert the image and no-repeat and fixed options for the background image.

Here, we have used two colors in linear-gradient with an opacity of 0.7 in each color. The to right value inside the linear-gradient indicates the pattern or direction of the color.

It means the left side of the container contains the color rgba(50, 70, 80, 0.7), and gradually the color changes to rgba(30, 20, 150, 0.7) while moving to the right.

The example below shows that the linear-gradient provides image overlay, which includes two different colors moving from left to right due to the transparency of color used in linear-gradient.

Example Code:

<div id="main">
</div>

#main {
 height: 100vh;
 width: 100%;
 background: linear-gradient(to right, rgba(50, 70, 80, 0.7), rgba(30, 20, 150, 0.7)), url("/img/DelftStack/logo.png") no-repeat fixed;
}

Use the background-blend-mode Property to Overlay Background Image With Gradient in CSS

The background-blend-mode property sets how an element’s background images should blend with the element’s background color. The property takes values like lighten, darken, multiply, saturation, overlay, soft-light, color-dodge, hard-light etc.

The background-blend-mode property blends the background-color with the background-image. The default value of the background-blend-mode property is normal.

We can use the property to provide an overlay to the background image. We can use the background-blend-mode property after setting the background image.

For example, create a div in HTML. In CSS, set the background image using the url() function and set the no-repeat and fixed values in the background property.

Next, set the height at 100vh for the div. Apply the hidden value for the overflow property.

Likewise, set the background-color property with the value rgba(50, 70, 80, 0.7). Finally, use the background-blend-mode and set its value to soft-light to add an overlay effect to the background image.

Example Code:

<div id="main">
</div>

 #main {
 background: url("/img/DelftStack/logo.png") no-repeat fixed;
 height: 100vh;
 overflow: hidden;
 background-color: rgba(50, 70, 80, 0.7);
 background-blend-mode: soft-light;
}