JSFiddle - React, Tailwind, and code Playground

HTML

<div class="foo">
  <h1>Mooo!</h1>
</div>

CSS

.foo {
  width: 100%;
  height: 500px;
  background: url(http://www.royalgrass.com/wp-content/uploads/2014/11/large-artificial-grass-lawn.jpg) no-repeat;
  background-size: cover;
  position: relative;
  overflow: hidden;
  border: solid 1px red;
}
h1 {
  color: purple;
  font-size: 30vW;
  width: 50vw;
  display: block;
  padding: 10% 10%;
}
.foo::before {
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0; right: 0; top: 0; bottom: 0;
  background: url(http://www.smartcc365.com/data/out/36/882614.png) no-repeat 0 200px;
  background-size: contain;
  pointer-events: none;
  opacity: .5;
}