add overlay to background image code example
Example 1: How to overlay image with color in CSS?
background: linear-gradient(#3204fdba, #9907facc), url(https://picsum.photos/1280/853/?random=1) no-repeat top center;
Example 2: background image overlay
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);
}
Example 3: how to add a background overlay in css
.header {
background: rgba(0, 0, 0, 0.5);
}
Example 4: make background overlay css
<div id="element-with-background-image">
<div id="color-overlay"></div>
...
</div>