How to Add Overlay to Background Image Using CSS

Last Updated on October 31, 2021 by Roshan Parihar

In this tutorial, learn how to add overlay to background image in CSS. The short answer is to use the CSS background property and specify the overlay color together with the image URL to add color over the image.

To make the overlay color transparent for making the background image slightly visible, you have to use the rgba() color with the last value less than 1 for transparency. Let’s find out with the examples given below.

How to Add Overlay to Background Image Using CSS

The image without the overly color is shown below.

Real Image is

To make the background image color overlay effect, you have to use the CSS background: linear-gradient(0deg, rgba(), rgba()), url(). After that, specify some value to rgba() color for color overlay and url() for the background image as given below. You can change the value of the color as per your requirements.


Background Image After Adding Overlay Color

The above image contains the overlay color with a gradient that you change by changing the rgba() value. You can also use the background-repeat:no-repeat; to make the image do not repeat in the background. The background-size:cover; to make sure that the background image covers the whole area.

You May Also Like to Read

Leave a comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.