仕様

background-size<bg-size>#
一括/個別個別指定プロパティ
初期値auto
適用対象すべての要素
継承なし
百分率背景の配置領域を基準にしています。
計算値リスト、各アイテムは、キーワードまたは計算された<length-percentage>値の いずれかとして表されるサイズのペア（軸ごとに1つ）
補足<bg-size> = [ <length-percentage> | auto ]{1,2} | cover | contain
補足<length-percentage> = <length> | <percentage>

background-size プロパティは、要素の背景画像の寸法を設定する個別指定プロパティです。
非継承プロパティで、初期値は auto なので、省略時は auto が指定値となります。

値の数

  1. cdvSample510 > div { height: 6em; background-image: url(./sample16.png),url(./sample32.png),url(./sample.png); background-position: top left,top right,bottom left; background-repeat: no-repeat; outline: solid 1px; }
  1. <div class="cdvSample510">
  2. <div style=""></div></div>

例示の雛型です。style属性を書き換えて例示しています。
background-image プロパティに画像が複数組み指定してある為、background-size プロパティも同じだけ繰り返されます。

  1. background-size: 3em 2em, 1em 2em;

２組 を指定しました。ボックスの背景は、CSS3で複数のレイヤーを持つことができます。レイヤーの数は、background-image プロパティのカンマ区切り値の数によって決まります。
この例示の場合は、background-image プロパティのカンマ区切り値の数は３つです。 その結果、background-size プロパティのカンマ区切り値の数は３つ必要となります。余った分は無視され、足りない分は記述順に繰り返しで順次補足されます。
background-size: 3em 2em, 1em 2em, 3em 2em; として扱われます。

値の組み合わせ

  1. cdvSample500 > div { height: 6em; background-image: url(./sample.png); background-repeat: no-repeat; outline: solid 1px; }
  1. <div class="cdvSample500">
  2. <div style=""></div></div>

例示の雛型です。style属性を書き換えて例示しています。

  1. background-size: 2em 4em;

値２つ を指定しました。この場合、最初の値としての<length-percentage>は対応する画像の幅を表し、2番目の値としての<length-percentage>はその高さを表します。

  1. background-size: 2em;

値１つ を指定しました。この場合、指定した値としての<length-percentage>は対応する画像の幅を表し、2番目の値としての auto が記されたとしてその高さを表します。
キーワード cover | contain の場合は、値は１つのみ有効です。

<length> 値

  1. cdvSample500 > div { height: 6em; background-image: url(./sample.png); background-repeat: no-repeat; outline: solid 1px; }
  1. <div class="cdvSample400">
  2. <div style="text-align: right;">例</div></div>

例示の雛型です。style属性を書き換えて例示しています。
輪郭線は、要素を視覚化する為に記述しています。

例
  1. background-size: 2em;
  2. font-size: 2em;
  3. text-align: right;

単位 em の値を指定しました。em は、font-size の計算値を用います。

例
  1. background-size: 4.8rem;
  2. font-size: 2em;
  3. text-align: right;

単位 rem の値を指定しました。rem は、ルート要素のfont-size の計算値を用います。
ルート要素には、font-size: 62.5%; を指定しています。

例
  1. background-size: 48px;
  2. font-size: 2em;
  3. text-align: right;

単位 px の値を指定しました。px は、1 ピクセルです。
(ブラウザなどの環境で文字サイズ 16px を想定しての表示例です。)

例
  1. background-size: 5vw;
  2. font-size: 2em;
  3. text-align: right;

単位 vw の値を指定しました。vw は、ビューポートの初期値の包含ブロックにおける幅の1%と同じです。

例
  1. background-size: 10vh;
  2. font-size: 2em;
  3. text-align: right;

単位 vh の値を指定しました。vh は、ビューポートの初期値の包含ブロックにおける高さの1%と同じです。

例

<percentage> 値

  1. cdvSample500 > div { height: 6em; background-image: url(./sample.png); background-repeat: no-repeat; outline: solid 1px; }
  1. <div class="cdvSample500">
  2. <div style=""></div></div>

例示の雛型です。style属性を書き換えて例示しています。

  1. background-size: 80%;

単位 % の値を指定しました。% は、その軸が背景配置領域の指定された割合になるよう拡大縮小します。
しかし、背景の background-attachment の値が fixed の場合、配置領域はビューポート全体となります。

  1. background-size: 80%;
  2. background-attachment: fixed;

単位 % の値を指定しました。% は、その軸が背景配置領域の指定された割合になるよう拡大縮小します。
しかし、背景の background-attachment の値が fixed の場合、配置領域はビューポート全体となります。

キーワード

  1. cdvSample500 > div { height: 6em; background-image: url(./sample.png); background-repeat: no-repeat; outline: solid 1px; }
  1. <div class="cdvSample400">
  2. <div style=""></div></div>

例示の雛型です。style属性を書き換えて例示しています。

  1. background-size: auto;

キーワード auto の値を指定しました。auto は、1つの次元のauto値は、画像の固有の比率と他の次元のサイズを使用するか、失敗するか、画像の固有のサイズを使用するか、それを失敗して100％として扱うことによって解決されます。
両方の値がautoの場合、画像の固有の幅または高さ、あるいはその両方を使用する必要があります。存在する場合、欠落している寸法（ある場合）は上記のように自動として動作します。画像に固有の幅も固有の高さもない場合、そのサイズは、containの場合と同様に決定されます。
auto は background-size プロパティの初期値です。

  1. background-size: cover;

キーワード cover の値を指定しました。cover は、固有のアスペクト比（ある場合）を維持しながら、幅と高さの両方が背景の配置領域を完全にカバーできるように、画像を最小サイズにスケーリングします。

  1. background-size: contain;

キーワード contain の値を指定しました。contain は、固有のアスペクト比（ある場合）を維持しながら、画像を最大サイズに拡大縮小して、幅と高さの両方が背景の配置領域内に収まるようにします。

CSS全体のキーワード

値を１つのみ指定して全体に対して適用されています。１つ１つに対するキーワードとしての使用は出来ません。
個別に適用したい場合は、個別指定プロパティ(border-top-color, border-right-color, border-bottom-color, border-left-color)を使用して設定します。

  1. cdvSample570 > div { height: 4em; background-image: url(./sample.png); background-repeat: no-repeat; padding: 2em; background-size: 2em 4em; outline: solid 1px; }
  2. cdvSample570 > div > div { height: 4em; background-image: url(./sample.png); background-repeat: no-repeat; outline: solid 1px; }
  1. <div class="cdvSample570">
  2. <div><div style=""></div></div></div>

例示の雛型です。子要素のstyle属性を書き換えて例示しています。
パティングは、親子の余白として指定しています。高さの指定は、意図的に子要素を親要素からはみ出させる事により背景の色を継承しているのか透過しているのか明確化する為に記述しています。

  1. background-size: inherit;

キーワード inherit を指定しました。inherit は、明示的な継承です。

  1. background-size: initial;

キーワード initial を指定しました。initial は、プロパティの初期値を設定します。background-size プロパティの初期値は auto です。

  1. background-size: unset;

キーワード unset を指定しました。unset は、プロパティをリセットし継承プロパティなら継承，非継承プロパティなら初期値を設定します。background-size プロパティは非継承プロパティなので初期値の auto を設定します。