<div class="container">
  <div class="el">
    <p>
      My background origin has the default <code>padding-box</code> value. The background's position origin is at the padding box's top left corner.
    </p>
  </div>
  <div class="el origin-border-box">
    <p>
      My background origin has the value <code>border-box</code>. The background's position origin is at the border box's top left corner.
    </p>
  </div>
  <div class="el origin-content-box">
    <p>
      My background origin has the value <code>content-box</code>. The background's position origin is at the content box's top left corner.
    </p>
  </div>
  <p>Image from <a href="http://unsplash.com/">Unsplash</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: 90%;
}

.el {
  padding: 40px;
  margin-bottom: 30px;
  background-color: #0099cc;
  color: white;
  border: 30px solid rgba(233, 19, 140, 0.5);
  background-image: url(http://tympanus.net/codrops-playground/assets/images/cssref/properties/background-origin/workstation.jpg);
  height: 300px;
  background-repeat: no-repeat;
}

.origin-border-box {
  background-origin: border-box;
}

.origin-content-box {
  background-origin: content-box;
}