A CodePen by Greg. CSS Background Size

index.html

<div id="main-bg"></div>
<form class="container">
  <ul id="bg-opts" class="row">
    <li class="bg-opt-item span4">
      <p class="lead text-info">Background Size</p>
      <div class="bg-opt-radios">
        <p><label for="bg_size_cover" class="radio"><input type="radio" name="bg_size" value="cover" id="bg_size_cover" checked /> Cover</label></p>
        <p><label for="bg_size_contain" class="radio"><input type="radio" name="bg_size" value="contain" id="bg_size_contain" /> Contain</label></p>
        <p><label for="bg_size_100_auto" class="radio"><input type="radio" name="bg_size" value="100% auto" id="bg_size_100_auto" /> 100% auto</label></p>
        <p><label for="bg_size_auto_100" class="radio"><input type="radio" name="bg_size" value="auto 100%" id="bg_size_auto_100" /> auto 100%</label></p>
        <p><label for="bg_size_100_100" class="radio"><input type="radio" name="bg_size" value="100% 100%" id="bg_size_100_100" /> 100% 100%</label></p>
        <p><label for="bg_size_100px_100px" class="radio"><input type="radio" name="bg_size" value="100px 100px" id="bg_size_100px_100px" /> 100px 100px</label></p>
      </div>
    </li>
    <li class="bg-opt-item span4">
      <p class="lead text-info">Background Image</p>
      <div class="bg-opt-radios">
        <p><label for="bg_img_landscape" class="radio"><input type="radio" name="bg_img" value="http://farm5.staticflickr.com/4019/4558060963_5ddaa11406_b.jpg" id="bg_img_landscape" checked /> Landscape</label></p>
        <p><label for="bg_img_portrait" class="radio"><input type="radio" name="bg_img" value="http://farm7.staticflickr.com/6119/6302894527_72beee6c9c_b.jpg" id="bg_img_portrait" /> Portrait</label></p>
      </div>
    </li>
    <li class="bg-opt-item span4">
      <p class="lead text-info">Background Position</p>
      <div class="bg-opt-radios">
        <p><label for="bg_pos_center" class="radio"><input type="radio" name="bg_pos" value="center" id="bg_pos_center" checked /> Center</label></p>
        <p><label for="bg_pos_lt" class="radio"><input type="radio" name="bg_pos" value="left top" id="bg_pos_lt" /> Left Top</label></p>
        <p><label for="bg_pos_lb" class="radio"><input type="radio" name="bg_pos" value="left bottom" id="bg_pos_lb" /> Left Bottom</label></p>
        <p><label for="bg_pos_rt" class="radio"><input type="radio" name="bg_pos" value="right top" id="bg_pos_rt" /> Right Top</label></p>
        <p><label for="bg_pos_rb" class="radio"><input type="radio" name="bg_pos" value="right bottom" id="bg_pos_rb" /> Right Bottom</label></p>
      </div>
    </li>
  </ul>
</form>
<div class="container well well-small">
  <span class="muted">Foto oleh mas <a href="http://www.flickr.com/photos/tonyarmstrong/">Tony Armstrong</a>. Artikel lengkap <a href="http://noattr.com/css3-background-size">di sini</a>.</span>
</div>

script.js

$(function(){
  $("input[type=radio]").on("change", function(){
    var $el = $(this),
        $name = $el.attr("name"),
        $value =$el.val(),
        $target = $("#main-bg");
    
    switch($name){
      case "bg_size":
        $target.css("background-size", $value);
        break;
      case "bg_img":
        $target.css("background-image", "url("+$value+")");
        break;
      case "bg_pos":
        $target.css("background-position", $value);
        break;
    }
  });
});

style.css

#main-bg{
  width: 100%;
  height: 350px;
  margin-bottom: 1.9em;
  background-repeat: no-repeat;
  background-position: center;
  background-image: url(http://farm5.staticflickr.com/4019/4558060963_5ddaa11406_b.jpg);
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
}