W3Cで「モジュール背景とボーダー」について2011年2月15日付けで更新されてますね。
CSS3では、背景画像の幅・高さを拡大・縮小するプロパティが追加されていますので、あらためてまとめてみます。
拡大・縮小による画像劣化が気になるところですが、許容できるかどうかの判断は個人差があると思います。近頃のブラウザは優秀で、いい感じでスムージングされるので「OK！」とぼくは判断しました。
さすがにIE6の拡大・縮小したときのジャキジャキ感は堪えられませんが、そもそも「background-size」は適用されず無視されるので、IE6では背景画像は拡大・縮小されません。
Safari、Google Chrome、Operaですでに実装されています。
Firefoxもプリフィックス「-moz-」で適用されます。
IE8では残念ながら未実装でした。。。この辺はプログレッシブエンハンスメントで乗り切りたい！
IE9でプリフィックスなしで対応しているッ！！！Firefoxもバージョン15ではプリフィックスなしでいけるッ！（2012年9月14日追記）
background-size
用意されているbackground-sizeの値は、「auto」「contain」「cover」「横 縦」の4パターン。
background-sizeを使ったサンプル、用意しています。
指定要素に背景画像が常にある形でフィット – cover –
div {
background-image: url(画像URL);
background-position: center top;
background-repeat: no-repeat;
-moz-background-size: cover;
background-size: cover;
}背景画像の縦横比を保持したまま、指定要素に背景画像が常にある形でフィットします。
背景画像がはみ出すイメージです（はみ出た部分は見えない）。
背景画像が常に表示される形でフィット – contain –
-moz-background-size: contain;
background-size: contain;
背景画像の縦横比を保持したまま、常に背景画像の全体を表示させたいときに使用。
本来、装飾のためではない画像であれば背景画像ではなくimgタグで実装すべきですが、フォトサイトで威力発揮しそうです。
100% 100% – 横 縦 –
-moz-background-size: 100% 100%;
background-size: 100% 100%;背景画像の縦横比を保持しない。リストとかのサムネイルで画像サイズを統一させたいときに威力発揮です。
100% auto – 横 縦 –
-moz-background-size: 100% auto;
background-size: 100% auto;指定要素の横幅と背景画像の横幅が一致。背景画像の縦横比を保持し、高さは自動設定。
auto 100% – 横 縦 –
-moz-background-size: auto 100%;
background-size: auto 100%;指定要素の高さと背景画像の横幅が一致。背景画像の縦横比を保持し、幅は自動設定。
言葉ではなかなか伝わりにくいので、background-sizeを使ったサンプルでご確認ください。サンプルページをリサイズしていただければ直感的にbackground-sizeのことがより理解できるかと思います。
まとめ
こいつはぁ、やばい！
今まで背景画像にしたかったところを無理やりimgタグとpositionを駆使して、リサイズするたびにJavaScript走らせてリサイズ後の幅と高さを取得して、画像の縦横比と表示領域の縦横比を比較して・・・みたいなことをやってたけど、そんなの一切いらない。
background-size:cover;
こんだけ。