JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
    <div class="background"></div>
    Text on top, no big deal, no big deal. Just a little text and stuff. That's all.
</div>

CSS

.container {
      width:320px;
      height:374px;
      display: block;
      position: relative;
      border: solid 1px #f00;
    }
    
    .container .background {
      content: "";
      background-image: url('http://placehold.it/800x600');
      background-size: cover;
      background-repeat: no-repeat;
      opacity: 0.5;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      position: absolute;
      z-index: -1;   
    }