JSFiddle - React, Tailwind, and code Playground

HTML

<div class="hero">
  <div class="overlay">
    <div class="header">
      <p class="text-center overlay-text">SOME CONTENT HERE</p>
    </div>
  </div>
</div>

SCSS

.hero {
  background-image: url('http://lorempixel.com/400/200/sports/');
  background-size: cover;
  position: relative;
  display: block;
  min-height: 101vh;
  color: white;
}
.hero:after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: rgba(0,0,0,.5);
}
.overlay-text {
  position: absolute;
  z-index: 200;
}
.overlay-text:after {
  z-index: 200;
}