.module { background-image: linear-gradient(black, black), url(image-to-be-fake-filters.jpg); background-size: cover; background-blend-mode: saturation; }.testclass { background-image: url("../images/image.jpg"), linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)); background-blend-mode: overlay; } /* Or if you like to add a transparent gray layer over your image or div background you can use "filter:" example: */ .card img{ width: 100%; height: 100%; object-fit: cover; border: 10px solid #fff; box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1); border-radius: 5px; transition: 0.5s; } .card img:hover{ transform: scale(1.02); filter: blur(2px) grayscale(50%); }html { min-height:100%; background:linear-gradient(0deg, rgba(255, 0, 150, 0.3), rgba(255, 0, 150, 0.3)), url(http://lorempixel.com/800/600/nature/2); background-size:cover; } .header { background: rgba(0, 0, 0, 0.5); /* Black color with 50% alpha/opacity */ }html { background:url(http://lorempixel.com/800/600/nature/2); background-size:cover; box-shadow:inset 0 0 0 2000px rgba(255, 0, 150, 0.3); }.testclass { background-image: url("../images/image.jpg"), linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)); background-blend-mode: overlay; }#main { height: 100vh; width: 100%; background: linear-gradient(to right, rgba(50, 70, 80, 0.7), rgba(30, 20, 150, 0.7)), url("https://loremflickr.com/720/640") no-repeat fixed; }.image:before{ content: ""; background: rgba(0,0,0,.6); position: absolute; top: 0; left: 0; right: 0; bottom: 24px; }background-image: url("../images/image.jpg"), linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)); background-blend-mode: overlay;<div id="element-with-background-image"> <div id="color-overlay"></div> ... </div>/* HTML */ <div class="container"> <h1>Background Overlay Example</h1> </div> /* CSS */ .container { position: relative; /* Set the container as a positioning context */ width: 100%; height: 400px; background-image: url('your-background-image.png'); /* Replace 'your-background-image.png' with your actual image path */ background-size: cover; background-position: center; } .container::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); /* Adjust the opacity as needed */ z-index: 1; /* Ensure the overlay is on top of the background */ } h1 { position: relative; /* Ensure the content is on top of the overlay */ z-index: 2; color: white; text-align: center; padding-top: 150px; font-size: 24px; }