JSFiddle - React, Tailwind, and code Playground

by Jasper Stevens

HTML

<header class="mask">
  dit is de header
</header>

<div class="image1"><img src="https://scontent-amt2-1.xx.fbcdn.net/v/t31.0-8/14067761_10157794925525497_2151569052895409164_o.jpg?oh=4fc7ee84741da823541ca1623dc66493&oe=592284FF" alt="" class="mask" /></div>

<div class="image2"><img src="https://scontent-amt2-1.xx.fbcdn.net/v/t31.0-8/13667826_10157725153560497_5089193712782138955_o.jpg?oh=f05d4b4e98140ac4f88cc7a0bc45ac7d&oe=591F9AE8" alt="" class="mask" /></div>

<footer>
  dit is de footer
</footer>

CSS

body {
  background: #000;
  margin: 0;
  padding: 0;
}
img {
  width: 100%;
}
.mask {
    mask: url(http://www.webba.nl/ticket/golf.png);
    -webkit-mask: url(http://www.webba.nl/ticket/golf.png) bottom left repeat-x;
    -o-mask: url(http://www.webba.nl/ticket/golf.png) bottom left repeat-x;
    -ms-mask: url(http://www.webba.nl/ticket/golf.png) bottom left repeat-x;
}
.image1 {
  position: relative;
  z-index: 1;
  margin-top: -30px;
}
.image2 {
  position: relative;
  margin-top: -30px;
}
footer {
  color: #fff;
  padding: 30px;
}
header {
  color: #fff;
  padding: 30px 30px 50px;
  background: #ccc;
  position: relative;
  z-index: 2;
}