Why make an image overlay?
Overlaying an image can be useful to make an image uniform and not so bright to match your theme or see white text on top of a light image.
The Useful CSS
This is the important part of the css, by creating a pseudo element on the container and setting the container to position: absolute, and the image to fill the container.
.container {
width: 500px;
height: 300px;
margin: 0 auto;
position: relative;
}
.image {
width: 100%;
height: 100%;
object-fit: cover;
}
.container::before {
content: '';
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.5);
}The full page demo
<html>
<head>
<title>ScottsWeb.Dev - Image overlay</title>
</head>
<style>
.container {
width: 500px;
height: 300px;
margin: 0 auto;
position: relative;
}
.image {
width: 100%;
height: 100%;
object-fit: cover;
}
.container::before {
content: '';
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.5);
}
</style>
<body>
<div class="container">
<img class="image" src="image.webp" alt="Image" width="500" height="300">
</div>
</body>
</html>