JSFiddle - React, Tailwind, and code Playground

HTML

<div class="front">
         <p>Hello World</p>
    </div>

CSS

.front { z-index: 1;}

.front:before{
  content: "";
   position: absolute;
   z-index: -1;
   top: 0;
   bottom: 0;
   left: 0;
   right: 0;
   background-image: url("http://webneel.com/wallpaper/sites/default/files/images/01-2014/23-animation-wallpaper.preview.jpg");
    background-repeat: no-repeat;
    background-size: 100%;
    opacity: 0.4;
    filter:alpha(opacity=40);
    height:200px;
    width:200px;
}

.font > p {  
   z-index:-1;
   opacity: 1;
   filter:alpha(opacity=100);
}