背景画像の拡大縮小〜background-size

background-sizeプロパティについて

背景画像をCSSで設定するにはbackground-imageプロパティを使用します。

CSS3のbackground-sizeプロパティは、背景画像の幅・高さを拡大・縮小することができます。ただし、拡大すると画像の劣化が起こりますので注意してください。
CSS3ですからIE8以下のバージョンでは未対応です。

background-sizeの値は、「auto」、「contain」、「cover」、「横 縦」の4パターンがあります。

background-sizeプロパティの値について

background-size:auto

auto は背景画像を画像の縦横比率が維持したまま拡大縮小します。
初期値はautoです。background-size プロパティの値をセットした後にショートハンドプロパティ background を使用した場合に初期値が適用されます。
autoのサンプル１　autoのサンプル２

background-size:contain

containは、背景画像が表示するBOXと同じか小さな幅と高さを持つことが保証される範囲で、なるべく大きくすべきであることを示します。
containのサンプル１　containのサンプル２

background-size:cover

coverは、背景画像が表示するBOXと同じか大きな幅と高さを持つことが保証される範囲で、なるべく小さくすべきであることを示します。表示するBOXに背景画像が常にある形でフィットします。
背景画像がはみ出す場合は、はみ出た部分は見えません。
coverのサンプル１　coverのサンプル２

background-size:100% 100%

背景画像は指定サイズで描画されます。
100%のサンプル１　100%のサンプル２

heightのパーセント指定の注意点

ボックス要素を「height:100%」で指定しても、その要素そのものの高さにしかなりません。
これは親要素の高さに依存するからです。親要素に高さの指定がない場合は子要素をheight:100%に指定してもautoになります。
ボックス要素の高さを100パーセントにするには親要素の高さを決めます。
例えば親がbodyの場合は以下のようにします。

html,body{
  height: 100%;
}
#container{
  width:100%;
  height:100%;
}