<div class="wrapper">
  <div class="element">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto, ipsa, corporis rem praesentium accusantium est aut illum officiis ipsum minima explicabo laborum debitis beatae modi labore aspernatur esse similique distinctio!</p>
    <img src="http://tympanus.net/codrops-playground/assets/images/cssref/properties/mask-clip/field.jpg" alt="">
  </div>
</div>
body {
  color: #555;
  background-color: #111;
  /*background-color: #f5f5f5;*/

  font-size: 1.1em;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

.wrapper {
  margin: 20px auto;
  border: 1px solid #ccc;
  max-width: 480px;
}

.element {
  background-color: white;
  display: block;
  padding: 30px;
  max-width: 400px;
  height: 400px;
  border: 10px solid fuchsia;
  -webkit-mask-image: url(http://tympanus.net/codrops-playground/assets/images/cssref/properties/mask-clip/mask-image.png);
  mask-image: url(http://tympanus.net/codrops-playground/assets/images/cssref/properties/mask-clip/mask-image.png);
  -webkit-mask-position: center center;
  mask-position: center center;
  -webkit-mask-repeat: repeat;
  mask-repeat: repeat;
  -webkit-mask-size: 200px 200px;
  mask-size: 200px 200px;
  -webkit-mask-clip: content-box;
  mask-clip: content-box;
}

img {
  max-width: 100%;
}