JSFiddle - React, Tailwind, and code Playground

HTML

<div class="bkdg">
    <div class="blend">
         <div class="inner">
           <h1>Header</h1>
         </div>
    </div>
</div>

CSS

.bkdg {
    background: url("http://4.bp.blogspot.com/-XkviAtJ1s6Q/T3YFb2RUhDI/AAAAAAAAAVQ/EHomLZlFMKo/s1600/small+cat.jpg;") center center no-repeat fixed;
    background-size: cover;
    height: 700px;
    width: 700px;
}
.blend {
    position: relative;
    width: 100%;
    height: 100%;
}
.blend::before {
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  background-color: green;
  mix-blend-mode: multiply;
}
.inner {
    position: absolute;
    z-index: 2;
}
h1 {
  color: white;
}