JSFiddle - React, Tailwind, and code Playground

HTML

<div id="banner">
  <h3>See how the text is not transparent.</h3>
</div>

CSS

Tente assim: 

    #banner {
       width: 100%;
       height: 100vh;
       position: relative;
    }
    
    #banner:after{
       content : "";
       position: absolute;
       top: 0;
       right: 0;
       left: 0;
       bottom: 0;
       width: 100%;
       height: 100%;
       opacity : 0.2;
       z-index: -1;
       
       background: url(http://www.jj.com.br/galerias/noticias/1000/codigo_0021653/2015-10-10_13-38-03_1.jpg) center center no-repeat; 
       -webkit-background-size: cover;
       -moz-background-size: cover;
       background-size: cover;
    }