Reference Documentation

Demo: Background Origin

Padding Box
Border Box
Content Box
<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 "compass/css3";

.example {
  padding: 2em;
  div {
    background: {
      image: image-url("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 compass/css3

.example
  padding: 2em
  div
    background:
      image: image-url("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)
.example{padding:2em}.example div{background-image:url('/images/examples/css3/bg-origin/bg.png?1351100027');background-repeat:repeat;background-position:top left;border:10px solid rgba(255,0,0,0.5);color:#fff;text-shadow:#000 2px 2px;padding:1em;text-align:center;margin-bottom:2em}.example #padding-box{-webkit-background-origin:padding;-moz-background-origin:padding;-ms-background-origin:padding-box;-o-background-origin:padding-box;background-origin:padding-box}.example #border-box{-webkit-background-origin:border;-moz-background-origin:border;-ms-background-origin:border-box;-o-background-origin:border-box;background-origin:border-box}.example #content-box{-webkit-background-origin:content;-moz-background-origin:content;-ms-background-origin:content-box;-o-background-origin:content-box;background-origin:content-box}