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>