Answers for "black background overlay"

1

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;
}
Posted by: Guest on July-22-2020
0

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>
Posted by: Guest on May-24-2021
1

make background overlay css

<div id="element-with-background-image">
   <div id="color-overlay"></div>
   ...
</div>
Posted by: Guest on July-22-2020

Code answers related to "black background overlay"

Browse Popular Code Answers by Language