add color overlay to background image css code example
Example 1: how to have a background image with a color overlay
.tinted-image {
background:
linear-gradient(
rgba(255, 0, 0, 0.45),
rgba(255, 0, 0, 0.45)
),
url(image.jpg);
}
Example 2: 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 3: overlay color on image css
footer#site-footer{
position:relative;
}
footer#site-footer:before {
position: absolute;
content: '';
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.3);
}
Example 4: how to add a background overlay in css
.header {
background: rgba(0, 0, 0, 0.5);
}