black overlay on background image css code example

Example 1: how to put a black overlay on a photo css

.header {
  background: rgba(0, 0, 0, 0.5); /* Black color with 50% alpha/opacity */
}

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: 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>