#68: Think Geek Background Fade Technique | CSS-Tricks

数枚の背景画像を使って面白い背景画像を設定するCSSサンプル。
静止画では説明しにくいのですが、画面をスクロールすることで面白い効果が得られます。



↓↓スクロールでグラデーションが濃くなる



とりあえず、デモページ を見るのがよいですね（＾＾；）

fixedで固定にするのと、そのままスクロールさせるものを組み合わせて透過PNGで実現されてますね。

CSSは以下のように3枚の画像を使ってるみたいです。

body { background: #404143 url(../images/bodytiletop.jpg) repeat-x; }
#page-wrap { background: url(../images/bodytilebottom-tall.jpg) repeat-x left bottom; }
#fancy-fancy { background: url(../images/circlepattern.png) fixed repeat-x -275px bottom; }
#inner-wrap { width: 550px; background: white; margin: 0 auto; min-height: 2000px; }

応用してもっと面白いことが出来るかも。例えば、複数枚で違う色のグラデーションを組み合わせてみるとか。