リサイズするボックスにあわせて背景画像のサイズを拡大縮小する！
CSS3から、背景がゾノ幅や高さを拡大縮小するプロパティが追加されています。
簡単に、可変するボックスの領域にあわせて、背景画像の大きさがかわるCSSの表記についてまとめておきます。
拡大縮小することで、当然ながら画像劣化あります。
デザイン上問題かどうかは、サイトの使い方や表現によってだと思います。最近のブラウザは優秀で、適度にスムージングされるので活用してみるのも一つの手ではないでしょうか？
画像の荒さを補完できるコンテンツ力で勝負しましょう！！
Safari、Google Chrome、Operaですでに実装されています。
Firefoxもプリフィックス「-moz-」で適用されます。
background-size
background-sizeの値は、「auto」「contain」「cover」「横 縦」の4種類が用意されています。
指定要素に背景画像が常にある形でフィット – 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%;
背景画像の縦横比を保持しません。リストとかのサムネイルで画像サイズを統一させたいときに威力発揮です。
縦：横 = auto：100%
-moz-background-size:100% auto; background-size:100% auto;
指定要素の横幅と背景画像の横幅が一致。背景画像の縦横比を保持し、高さは自動設定。
縦：横 = 100%：auto
-moz-background-size:auto 100%; background-size:auto 100%;
指定要素の高さと背景画像の横幅が一致。背景画像の縦横比を保持し、幅は自動設定。