JSFiddle - React, Tailwind, and code Playground

HTML

<div>With overlay</div>
<div>Without overlay</div>

CSS

div {
    width:600px;
    height:200px;
    position:relative;
    background:url('http://images2.layoutsparks.com/1/210989/beach-paradise-deault-trees.jpg');
    z-index:5;
}

div:first-of-type::before {
    content:'';
    width:600px;
    height:200px;
    position:absolute;
    z-index:-3;
    display:block;
    opacity:0.5;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#8fc400), color-stop(100%,#ff0000)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #8fc400 0%,#ff0000 100%); /* Chrome10+,Safari5.1+ */
background: linear-gradient(to bottom, #8fc400 0%,#ff0000 100%);
}