<svg width="100%" height="100%"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:xlink="http://www.w3.org/1999/xlink">
  <mask id="mask" x="0" y="0" width="100%" height="100%">
    <rect x="0" y="0" width="100%" height="100%" fill="#000"/>
    <rect x="10%" y="10%" width="15%" height="80%" fill="#fff"/>
    <rect x="30%" y="5%" width="20%" height="90%" fill="#fff"/>
    <rect x="55%" y="15%" width="20%" height="70%" fill="#fff"/>
    <rect x="80%" y="25%" width="15%" height="70%" fill="#fff"/>
  </mask>

  <image
    xlink:href="https://images.unsplash.com/photo-1513780043732-614405263485?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=90"
    x="0" y="0" height="100%" width="100%"
    preserveAspectRatio="xMidYMid slice"
    mask="url(#mask)"/>
</svg>

html, body {
  height: 100%;
}

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;
}