Demo: Background Size

<div class='example'>
  <div id='auto'>
    <code>background-size: auto</code>
  </div>
  <div id='contain'>
    <code>background-size: contain</code>
  </div>
  <div id='cover'>
    <code>background-size: cover</code>
  </div>
  <div id='percent'>
    <code>background-size: 50% 50%</code>
  </div>
  <div id='absolute'>
    <code>background-size: 100px 25px</code>
  </div>
</div>

.example
  #auto
    %code background-size: auto
  #contain
    %code background-size: contain
  #cover
    %code background-size: cover
  #percent
    %code background-size: 50% 50%
  #absolute
    %code background-size: 100px 25px

@import "compass/css3";

.example {
  padding: 2em;
  div {
    background: {
      image: image-url("examples/css3/bg-origin/bg.png");
      repeat: no-repeat;
      position: top left;
    };
    border: 10px solid rgba(255, 0, 0, 0.5);
    color: black;
    @include text-shadow(white 1px 1px 4px);
    padding: 1em;
    text-align: center;
    margin-bottom: 2em;
  }
  #auto {
    @include background-size(auto);
  }
  #contain {
    @include background-size(contain);
  }
  #cover {
    @include background-size(cover);
  }
  #percent {
    @include background-size(50% 50%);
  }
  #absolute {
    @include background-size(100px 25px);
  }
}

@import compass/css3

.example
  padding: 2em
  div
    background:
      image: image-url("examples/css3/bg-origin/bg.png")
      repeat: no-repeat
      position: top left
    border: 10px solid rgba(255, 0, 0, 0.5)
    color: black
    +text-shadow(#fff 1px 1px 4px)
    padding: 1em
    text-align: center
    margin-bottom: 2em
  #auto
    +background-size(auto)
  #contain
    +background-size(contain)
  #cover
    +background-size(cover)
  #percent
    +background-size(50% 50%)
  #absolute
    +background-size(100px 25px)

.example{padding:2em}.example div{background-image:url('/images/examples/css3/bg-origin/bg.png?1351100027');background-repeat:no-repeat;background-position:top left;border:10px solid rgba(255,0,0,0.5);color:#000;text-shadow:#fff 1px 1px 4px;padding:1em;text-align:center;margin-bottom:2em}.example #auto{-webkit-background-size:auto;-moz-background-size:auto;-o-background-size:auto;background-size:auto}.example #contain{-webkit-background-size:contain;-moz-background-size:contain;-o-background-size:contain;background-size:contain}.example #cover{-webkit-background-size:cover;-moz-background-size:cover;-o-background-size:cover;background-size:cover}.example #percent{-webkit-background-size:50% 50%;-moz-background-size:50% 50%;-o-background-size:50% 50%;background-size:50% 50%}.example #absolute{-webkit-background-size:100px 25px;-moz-background-size:100px 25px;-o-background-size:100px 25px;background-size:100px 25px}