<div class="container">
  <div class="el el-1">
    <p>
      My background painting area has the default <code>border-box</code> value.
    </p>
  </div>
  <div class="el el-2">
    <p>
      My background painting area has the value <code>padding-box</code>. No background is painted under the border.
    </p>
  </div>
  <div class="el el-3">
    <p>
      My background painting area has the value <code>content-box</code>. The background is drawn only behind the content.
    </p>
  </div>
  <div class="el el-4">
    <p>
      I have two background images each clipped to a different box. Remember that the first image is always showed in top of the ones after it (see <code>background-image</code> entry for details), so depending on the background clipping areas you specify, one background may get hidden behind another.
    </p>
  </div>
  <p>Images by <a href="https://dribbble.com/RoundedHexagon">RoundedHexagon</a></p>
</div>
body {
  background-color: #F5F5F5;
  color: #555;
  font-size: 1.1em;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

.container {
  margin: 40px auto;
  width: 80%;
}

.el {
  padding: 40px;
  margin-bottom: 30px;
  background-color: #0099cc;
  color: white;
  border: 30px solid rgba(224, 30, 108, 0.3);
  background-image: url(http://tympanus.net/codrops-playground/assets/images/cssref/properties/background-clip/polygon1.jpg);
}

.el-2 {
  background-clip: padding-box;
}

.el-3 {
  background-clip: content-box;
}

.el-4 {
  background-image: url(http://tympanus.net/codrops-playground/assets/images/cssref/properties/background-clip/polygon1.jpg), url(http://tympanus.net/codrops-playground/assets/images/cssref/properties/background-clip/polygon2.jpg);
  background-clip: content-box, padding-box;
  background-position: 100% 100%, top left;
}

.el p {
  padding: 20px;
  margin: 0;
}