背景画像のトップとボトムが、ページのトップとボトムと一致するように、
ページの長さに応じてスクロール量が変化する背景を設定する方法です。

ページのスクロールとは独立して(ページの縦幅に関係なく)、背景は背景画像の高さ(height)までしかスクロールしません。

ちょっと前から主流の fixed や、伝統の scroll に並ぶ、
新しい種類の背景(background-attachment)と言えるのではないでしょうか！

特徴

• 繰り返さない一枚絵の美しさと、ユーザーの操作に応えるインタラクションを兼ね備えています。
• パララックス効果を使った背景よりもシンプルです。
• 実装もシンプルで比較的 簡単です。

サンプルページ

当ブログのトップページがサンプルです。

コンテンツのスクロール量と、背景のスクロール量に注目。
スクロール バーでスクロールさせると、滑らかで分かりやすいかも知れません。

続きに jQuery コードと簡単な解説を書きます。

jQuery コード

$(window).scroll(function(){
    var wh = $(window).height();
    var dh = $(document).height();
    var st = $(document).scrollTop();

    if ( dh > wh ){
        $('body').css('backgroundPosition', '50% ' + ~~(st/(dh-wh)*100) + '%');
    }
});

body 要素の開始タグ直後に書けばOKだと思います。

簡単な解説

基本

背景画像の background-position は、縦位置の場合
0% を指定すると、背景には画像のトップから下、ウィンドウの高さまで表示され、
100% を指定すると、背景には画像のボトムから上、ウィンドウの高さまで表示されます。

つまり

背景画像の background-position を、
ページのスクロール量が最小(ゼロ)であるページのトップにいるとき 0% で、
ページのスクロール量が最大(max)であるページのボトムにいるとき 100% に設定すればよいわけです。

計算式

• ~~( st / (dh - wh) *100 ) + '%'

現在のスクロール量は st = $(document).scrollTop() で取得、
それがページ全体 dh = $(document).height() の何パーセントに当たるか計算し、
それをそのまま background-position の縦位置に設定します。
(このパーセンテージは 0% から 100% の間で変化することは自明でしょう)

ページのスクロール量 st = $(document).scrollTop() は、
ページ全体 dh = $(document).height() からウィンドウの高さ wh = $(window).height() を引いた値にて最大(max)になることに注意です。

新しい計算式

• ~~(st / (dh - wh) *10000) / 100 + '%'

1～100% までの 100段階ではスクロールが粗いため、100倍の 1万段階に。
こちらの方が美しいと思います。

スタイルシート

縦に長い背景画像を用意し、スタイルシートにて設定しておきます。
当ブログでは、現在 主流のフルHD ディスプレイで 2画面相当(2160px)の画像を用意しました。

スタイルシートは、例えば以下のように書きます。

background: no-repeat 50% 0 fixed url(/background_image.jpg);

「fixed」は必須です。
リピート指定は、「no-repeat」か、「repeat-x」です。

ちょっとした応用

縦位置を 100 から引き算して、100% → 0% で変化させると、ページを下にスクロールすると背景は上に、ページを上にスクロールすると背景は下にスクロールし、登ったり降りたりしているかのような視覚効果を出すことも可能です。

当ブログをサンプルにして試すには【ココ】をクリックしてください。意外に面白いです。
【ココ】をクリックすると元に戻ります。

変化させるのを横位置にすると、ページは縦にスクロール、背景は横にスクロール、なんてこともできます。

ひょっとして 新しいの生み出しちゃった？

検索しても出てこない、というか なんてワードで検索したら先人を見つけられるのか分かりません。
「この発想は無かった」「初めて見ました。すごい」とか自演コメントで こじょが発明者という既成事実を...(^ω^)