<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%">
  <defs>
    <pattern id="patt" viewBox="0 0 100 100" width="12.5%" height="100%" preserveAspectRatio="xMidYMid meet">
      <rect width="100%" height="100%" fill="#000" />
      <path d="M100,51.92h0a2,2,0,0,0-2,1.87A48.08,48.08,0,0,1,2,53.79c0-1-2-1.87-2-1.87V0H100Z" fill="#fff" />
    </pattern>

    <mask id="mask" x="0" y="0" width="100%" height="100%">
      <rect width="100%" height="100%" fill="#fff" />

      <svg viewBox="0 0 800 100" width="100%" height="100%" preserveAspectRatio="xMidYMax meet">
        <rect width="100%" height="100%" fill="url(#patt)" />
      </svg>

      <svg y="-10" viewBox="0 0 800 100" width="100%" height="100%" preserveAspectRatio="xMidYMax meet">
        <rect width="100%" height="50%" fill="#fff" />
      </svg>
    </mask>
  </defs>

  <image xlink:href="https://images.unsplash.com/photo-1460572894071-bde5697f7197?ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=753&amp;q=80" height="100%" width="100%" preserveAspectRatio="xMidYMid slice" mask="url(#mask)" />
</svg>

body {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3E%3Cg fill='%23969696' fill-opacity='0.4'%3E%3Cpath fill-rule='evenodd' d='M0 0h4v4H0V0zm4 4h4v4H4V4z'/%3E%3C/g%3E%3C/svg%3E");
  margin: 0;
}

svg {
  display: block;
  position: absolute;
  height: 50%;
}