JSFiddle - React, Tailwind, and code Playground

HTML

<div class="banner">
<div class="bg-color">

<img src="https://www.popoptiq.com/wp-content/uploads/2013/04/oblivion-3-600x316.jpg" class="fullscreen-bg__img"> 

</div>
</div>

CSS

.fullscreen-bg__img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: -1;
  min-width:100%;
  min-height:100%;
}

.banner{
  min-height: 580px;
  position: relative;
  overflow:hidden;
}

.bg-color{
  background-color: rgba(40, 40, 40, 0.5);
  min-height: 580px;
}