| 項 目 | 説 明 |
|---|---|
| 記述形式 |
|
| 値 の形式 |
|
| 初 期 値 | auto |
| 対応ブラウザー | C3+ / e9+ / N?+ / Fx4+ / Op10+ / Ch3+ / Sa4.1+ |
| 適用可能な要素 | すべての要素 |
| 継 承 | しない |
background-sizeプロパティ は，背景画像のサイズ を指定します。
値 １つのみを数値で指定した場合は，それを 値1 として， 値2 には初期値の auto が適用されます。 また，２つの値を指定する場合，値1 と 値2 は，それぞれ， 値1 が幅，値2 が高さの指定となります。
指定できる値の形式は，以下のとおりです。
| 値 | 説 明 |
|---|---|
| 数値 （長さ） | 背景画像の幅や高さを下のような単位を付けて指定します。 |
| 数値 （%） | 背景配置ボックスのサイズを基準にして，百分率（%）で指定します。 |
| auto | 一方の値を auto に指定した場合には，背景画像の本来の縦横比ともう一方の値でサイズを決めます。 これができない場合には背景画像の本来のサイズとします。 それも決められない場合には， 100% にします。 ２つの値の両方を auto に指定した場合には，まず，背景画像の本来の幅と高さの値にします。 幅か高さのうちどちらかがわからない場合には，上に述べた１つの値が auto である場合の扱いになります。 さらに，幅も高さもどちらもわからない場合には，contain が指定された場合の取り扱いになります。 （初期値） |
| cover | 通常，画像の上下，または，左右の 両端部分が完全には表示されない形 になります。 すなわち，背景画像の縦横比を維持して，幅と高さがともに 背景配置ボックス のそれら以上となる最小のサイズにリサイズします。 つまり，幅と高さのうち背景配置ボックスの値との比が小さい方を一致させるように，拡大・縮小します。 |
| contain | 通常，画像の上下，または，左右の両端部分に 画像が表示されない帯がついた形 になります。 すなわち，背景画像の縦横比を維持して，画像が 背景配置ボックス 内に完全に収まり，幅と高さがともに背景配置ボックスのそれら以下となる最大のサイズにリサイズします。 つまり，幅と高さのうち背景配置ボックスの値との比が大きい方を一致させるように，拡大・縮小します。 |
| 備 考 | 背景配置ボックス とは，background-origin プロパティ で指定した背景配置の基準となるボックスのことです。 |
数値では，次のような単位を付けて指定が可能です。
| 単位 | 説 明 |
|---|---|
| px | px とは画面の１画素（ピクセル） のサイズを１とする単位です。 実際に表示されるサイズは 72dpi や 96dpi といったモニタの解像度により変化します。 |
| em | em とは現在使用中の標準フォントの高さを１とする単位です。 |
| ex | ex とは現在使用中の標準フォントの小文字の｢x｣の高さを１とする単位です。 |
| ％ | 背景配置ボックスのサイズ（幅，高さ）を基準にして割合を％値で指定します。 |
前景の表示内容をスクロールした際に背景画像を同時に移動するか，そのまま同じ位置に留めて移動しないかは， background-attachment プロパティにより指定できます。
【注意】 Safari や Googole Chrome では， バグのため background プロパティ の " / " をつけた background-size の指定には対応していません。 もし，この形式で background-size を指定した場合には，これらのブラウザーでは，背景の画像や色の表示が全く行われません。 （background プロパティ の 例 をみてください。） この問題に対応するには，次のような対策が必要です。
次の例では，background-origin プロパティ は指定がないため，初期値の padding-box になりますので，それに合わせて配置されます。
| HTMLソース | |
|---|---|
| CSS <head> ～ </head> |
<style type="text/css" media="screen, handheld, print, tv" > <!-- div.sample1 { width: 30%; padding: 2em; border: solid 1.5em #99CC99; background: url(../logo.gif) center center no-repeat yellow; background-size: contain;} div.sample2 { width: 30%; padding: 2em; border: solid 1.5em #99CC99; background: url(../logo.gif) center center no-repeat yellow; background-size: cover;} div.sample3 { width: 30%; padding: 2em; border: solid 1.5em #99CC99; background: url(../logo.gif) center center no-repeat yellow; background-size: auto;} --> </style> |
| HTML <body> ～ </body> |
<div class="sample1"> ああああああああああああああ <br>ああああああああああああああ <br>ああああああああああああああ </div> <br> <div class="sample2"> ああああああああああああああ <br>ああああああああああああああ <br>ああああああああああああああ </div> <br> <div class="sample3"> ああああああああああああああ <br>ああああああああああああああ <br>ああああああああああああああ </div> |
| ブラウザー 表示例 |
|---|
| ↓↓↓background-size: contain; （パディングボックスに収まるように表示されます）
ああああああああああああああ
ああああああああああああああ ああああああああああああああ ↓↓↓background-size: cover; （パディングボックスに隙間ができないように表示されます）
ああああああああああああああ
ああああああああああああああ ああああああああああああああ ↓↓↓background-size: auto; （パディングボックスに元のサイズで表示されます）
ああああああああああああああ
ああああああああああああああ ああああああああああああああ |