DEMO

HTML

画像はCSSので配置するのでscale-bgというクラス名の空のdivを配置します。
fixedで固定表示するので他の要素とは別にしておきます。

HTML
<div class="scale-bg"></div>
<h1>Title</h1>
<div class="contents">
・・・
</div>

CSS

scale-bg に fixed、contents に relative を指定して位置を調節します。

CSS
.scale-bg {
  background: url(bg.jpg) no-repeat top center;
  background-size: 100%;
  position: fixed;
  width: 100%;
  padding-bottom: 400px;
}
h1 {
  position: absolute;
  top: 272px;
}
.contents {
  position: relative;
  top: 400px;
  padding: 60px 0;
}

jQuery

jQueryではscrollイベントでscale-bgのbackgroundSizeとtopの数値を加算するだけですね。

JavaScript
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
$(function() {
  $(window).scroll(function() {
    var scroll = $(window).scrollTop();
    $('.scale-bg').css({
      backgroundSize: (100 + scroll/3)  + "%",
      top: -(scroll/10)  + "%"
    });
  });
});
</script>