CSS 参考手册

CSS @规则(RULES)

CSS 属性大全

CSS3 background-size属性の使用方法及び例

CSS バックグラウンド-size属性で指定された背景画像のサイズ。

以下の表は、この属性の使用範囲とバージョン履歴をまとめています。

デフォルト値：	auto auto
適用範囲：	すべての要素
継承：	なし
アニメーション可能：	は。参照してください。アニメーション属性。
バージョン：	CSS3の新機能
JavaScript構文:	object　　　object.style.backgroundSize="60px 80px"

背景サイズの使用構文

この属性の構文は以下の通りです：

background-size: length | percentage | auto | cover | contain | initial | inherit

以下の例では、backgroundの使用方法を示します。-size属性。

例

.box　{
　　　　width:　250px;
　　　　height:　150px;
　　　　padding:　10px;
　　　　border:　6px　dashed　#333;
　　　　background:　url("images/sky.jpg")　no-repeat;
　　　　background-size:　contain;
}

テストを見て‹/›

ヒント：このbackground-size属性は通常、全サイズの背景画像を作成するために使用され、背景画像はブラウザのビューポートまたはwitdhの大きさに応じてスケーリングされます。

属性値

以下のテーブルはこの属性の値を説明しています。

値	説明
length	背景画像の幅と高さを指定された長さに設定します。最初の値が幅を設定し、二つ目の値が高さを設定します。一つの値のみ指定された場合、二つ目の値はデフォルトでautoになります。負の長さ値を使用することは許可されていません。
percentage	背景画像の幅と高さを背景定位エリアのパーセンテージに設定します。最初の値が幅を設定し、二つ目の値が高さを設定します。一つの値のみ指定された場合、二つ目の値はデフォルトでautoになります。負のパーセンテージ値を使用することは許可されていません。
auto	一つのautoが一つの次元の値に対応する方向の背景画像のスケーリングに使用され、固有の比率が維持されます。もしautoが二つのサイズの両方に値が指定された場合、背景画像は自らの幅と高さを含むため、デフォルトの動作です。
cover	画像の固有の長さと幅（もしあれば）を保ちつつ、画像を最小サイズにスケーリングして、幅と高さの両方を背景定位エリアに完全に覆う。
contain	画像の固有の長さと幅（もしあれば）を保ちつつ、画像を縮小し、最大サイズでスケーリングして、幅と高さの両方を背景定位エリアに適合させる。
initial	この属性をデフォルト値に設定します。
inherit	指定された場合、関連する要素は親要素のbackgroundを使用します。-size属性の計算値。

ブラウザの互換性

background-size属性のブラウザの互換性、すべての主要ブラウザがこの属性をサポートしています。

	Firefox 4+ Google Chrome4+ Internet Explorer 9+ Apple Safari 3+ Opera 10.5+

さらに詳しく

以下のチュートリアルを参照してください：CSSバックグラウンド、CSS3背景。

CSS border属性 CSS バックグラウンド-repeat 属性