color overlay background image css code example
Example 1: how to have a background image with a color overlay
/* Working method */
.tinted-image {
background:
/* top, transparent red, faked with gradient */
linear-gradient(
rgba(255, 0, 0, 0.45),
rgba(255, 0, 0, 0.45)
),
/* bottom, image */
url(image.jpg);
}
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: make background overlay css
#element-with-background-image {
position: relative;
background-image: url("//spin.atomicobject.com/wp-content/uploads/20170324102432/portfolio-tips-feature-image.jpg");
}
#color-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: black;
opacity: 0.6;
}
Example 4: make background overlay css
<div id="element-with-background-image">
<div id="color-overlay"></div>
...
</div>
Example 5: css background image black overlay
<style>
#wrapper{
position:relative;
width:fit-content;
height:fit-content;
}
#overlay{
position:absolute;
top:0;
width:100%;
height:100%;
z-index:1;
background-color:black;
opacity:.5;
}
</style>
<div id='wrapper'>
<img src="https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/dog-puppy-on-garden-royalty-free-image-1586966191.jpg?crop=1.00xw:0.669xh;0,0.190xh&resize=640:*" alt="">
<div id='overlay'></div>
</div>