CSS3 チュートリアル

CSS3 リファレンス

背景画像のサイズを指定します:

div
{
background:url(img_flwr.gif);
background-size:80px 60px;
background-repeat:no-repeat;
}

Try it yourself »
このページの下に別な例もあります。

background-size プロパティは、IE9+、Firefox 4+、Opera、Chrome 及び Safari 5+ でサポートされています。

background-size プロパティは、背景画像のサイズを指定します。

デフォルト値:	auto
継承:	no
バージョン:	CSS3
JavaScript構文:	object.style.backgroundSize="60px 80px"

background-size: length|percentage|cover|contain;

値	説明
length	背景画像の高さと幅を設定します。最初の値は幅を設定し、2番目の値は高さを設定します。 1つの値しか指定しない場合、2番目の値は "auto" に設定されます
percentage	画像の高さと幅を親要素のパーセントで設定します。最初の値は幅を設定し、2番目の値は高さを設定します。 1つの値しか指定しない場合、2番目の値は "auto" に設定されます
cover	コンテンツ・エリアの中にフィットする、最も小さいサイズの幅と高さにイメージを縮小します
contain	コンテンツ・エリアの中にフィットする、最も大きいサイズの幅と高さにイメージを拡大します

背景画像の伸縮
コンテンツエリアを完全に覆うように背景画像を伸縮します。

背景画像を水平に4つコピーして引き伸ばす
4つのコピーが丁度水平にフィットするように、背景イメージを引き伸ばします。