JSFiddle - React, Tailwind, and code Playground

HTML

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

CSS

div {
      width:320px;
      height:374px;
      display: block;
      position: relative;
    border: solid 1px #f00;
    }
    
    div::after {
      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;   
    }