Sometimes we need to make a color overlay on an image for different causes like when we want to use a picture as background. if the picture is so bright then text above the picture will be very hard to read. So there is two solution to color overlay on an image. First is use photoshop to make color overlay on an image but this image will be colored of all time.
Second is we can use CSS to make a color overlay on an image. In this way can remove the color overlay on an image anytime and our original picture will stay.

HTML and CSS code to make color overlay on an image.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
Body{Margin:0;Padding:0;}
.maindiv{
width:100%;
Height:600px;
background:url('test.jpg');
Background-size:cover;
Background-position:center center;
Position: relative;
Overflow:hidden;
}
.overlay{
Position:absolute;
Top:0;
Left:0;
width:100%;
height:100%;
background:rgba(0,0,200,0.5); /*overlay color, you can change it according to yours*/
}
</style>
</head>
<body>
<section class="maindiv">
<div class="overlay"></div>
</section>
</body>
</html>

 

Note: CSS of maindiv position have to relative and for overlay, div position must be absolute. To cover the total image overlay top and bottom must be 0(zero). To make Hex code to RGBA color click here. Here is the final output of color overlay on an image with HTML and CSS.

make a color overlay on an image

Click here to get the video to make a color overlay on an image