JSFiddle - React, Tailwind, and code Playground

HTML

<div class="has-bg-img">SOME RANDOM TEXT</div>

CSS

.has-bg-img:after {
    content:'';
    background: url('http://placehold.it/500x100') no-repeat center center;
    position: absolute;
    top:0px;
    left: 0px;
    width:100%;
    height:100%;
    z-index:-1;
    opacity: 0.2; /* Here is your opacity */
}
.has-bg-img {
    position: relative;
    width:100%;
    padding:50px;
    font-weight:bold;
    text-align:center;
}