<div class='example'>
  <div id='padding-box'>
    Padding Box
  </div>
  <div id='border-box'>
    Border Box
  </div>
  <div id='content-box'>
    Content Box
  </div>
</div>

.example
  #padding-box
    Padding Box
  #border-box
    Border Box
  #content-box
    Content Box

@import "https://compass-style.org/files/docs/examples/compass/css3/compass/css3";
.example {
  padding: 2em;
  div {
    background: {
      image: image-url("https://compass-style.org/files/docs/examples/compass/css3/examples/css3/bg-origin/bg.png");
      repeat: repeat;
      position: top left; };
    border: 10px solid rgba(255, 0, 0, 0.5);
    color: white;
    @include text-shadow(darken(blue, 50%), 2px, 2px);
    padding: 1em;
    text-align: center;
    margin-bottom: 2em; }
  #padding-box {
    @include background-origin(padding-box); }
  #border-box {
    @include background-origin(border-box); }
  #content-box {
    @include background-origin(content-box); } }

@import https://compass-style.org/files/docs/examples/compass/css3/compass/css3
.example
  padding: 2em
  div
    background:
      image: image-url("https://compass-style.org/files/docs/examples/compass/css3/examples/css3/bg-origin/bg.png")
      repeat: repeat
      position: top left
    border: 10px solid rgba(255, 0, 0, 0.5)
    color: white
    +text-shadow(darken(#00f, 50%), 2px, 2px)
    padding: 1em
    text-align: center
    margin-bottom: 2em
  #padding-box
    +background-origin(padding-box)
  #border-box
    +background-origin(border-box)
  #content-box
    +background-origin(content-box)

@charset "UTF-8";
.example {
  padding: 2em;
}
.example div {
  background-image: url('https://compass-style.org/files/docs/images/examples/css3/bg-origin/bg_1273906568.png');
  background-repeat: repeat;
  background-position: top left;
  border: 10px solid rgba(255, 0, 0, 0.5);
  color: white;
  text-shadow: black 2px 2px 1px;
  padding: 1em;
  text-align: center;
  margin-bottom: 2em;
}
.example #padding-box {
  -moz-background-origin: padding;
  -webkit-background-origin: padding;
  -o-background-origin: padding-box;
  -ms-background-origin: padding-box;
  -khtml-background-origin: padding-box;
  background-origin: padding-box;
}
.example #border-box {
  -moz-background-origin: border;
  -webkit-background-origin: border;
  -o-background-origin: border-box;
  -ms-background-origin: border-box;
  -khtml-background-origin: border-box;
  background-origin: border-box;
}
.example #content-box {
  -moz-background-origin: content;
  -webkit-background-origin: content;
  -o-background-origin: content-box;
  -ms-background-origin: content-box;
  -khtml-background-origin: content-box;
  background-origin: content-box;
}