black overlay on my background image code example

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