<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 "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: 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 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: 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)

@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: no-repeat;
  background-position: top left;
  border: 10px solid rgba(255, 0, 0, 0.5);
  color: black;
  text-shadow: white 1px 1px 4px;
  padding: 1em;
  text-align: center;
  margin-bottom: 2em;
}
.example #auto {
  -moz-background-size: auto;
  -webkit-background-size: auto;
  -o-background-size: auto;
  background-size: auto;
}
.example #contain {
  -moz-background-size: contain;
  -webkit-background-size: contain;
  -o-background-size: contain;
  background-size: contain;
}
.example #cover {
  -moz-background-size: cover;
  -webkit-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
.example #percent {
  -moz-background-size: 50% 50%;
  -webkit-background-size: 50% 50%;
  -o-background-size: 50% 50%;
  background-size: 50% 50%;
}
.example #absolute {
  -moz-background-size: 100px 25px;
  -webkit-background-size: 100px 25px;
  -o-background-size: 100px 25px;
  background-size: 100px 25px;
}