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.
|
1 2 3 4 5 6 7 8 9 10 11 |
<style> .bg-overlay{ width: 100%; height: 400px; background: linear-gradient(0deg, rgba(255 255 255 / 54%), rgba(255 0 150 / 69%)), url(../../images/carousel-img2.jpg); background-repeat:no-repeat; background-size: cover; } </style> <div class="bg-overlay"> </div> |
Output
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