CSS3　background-sizeプロパティは、background画像のサイズ指定に使います。数値で2つ指定すると、縦横それぞれのサイズ指定になります。2つのうち、縦横のどちらかのみに数値を、もう一方をautoにすると、数値を入れたほうの自動算出された比率がもう一方にも適用されます。

background-sizeの値

• 初期値は[auto]になり、自動でサイズが決められます。
• [px]や[em]などを使った数値は、その指定通りのサイズに。
• [%]を使った数値は、背景領域サイズに対する割合になります。
• [contain]は、縦横の比率を保持したまま、背景領域に収まる最大サイズに。
• [cover]は、縦横の比率を保持したまま、背景領域を覆う最小サイズに。

次のサンプルに使う画像は、横が648px、縦が400pxです。


背景領域は、画像よりも小さめの横450px、縦250px、borderを1pxにしてあります。

サンプル（１）background-size無指定（初期値の[auto]）

左上から描画された実寸の画像が小さな背景領域に収まらず、右側、下側が切り取られます。

サンプル（２）background-sizeを数値「550px auto」に

横サイズ648pxが550pxに縮小され、左上から描画されますが、同じく背景領域に収まらず、右側、下側が切り取られます。

サンプル（３）background-sizeを数値「100%」に

横サイズ648pxが背景領域横サイズ100%のサイズに縮小されほぼピッタリ（border分を除いて）収まります。同じ比率で縦も縮小されますが、こちらは収まりきらないので下側が切り取られます。

サンプル（４）background-sizeを数値「100% 100%」に

画像の縦横サイズともに背景領域サイズの100%に縮小され、ほぼピッタリ（border分を除いて）収まります。このサンプルの場合、縦横比率は変わり、やや横長になります。

サンプル（５）background-sizeを数値「80%」に

横サイズ648pxが背景領域横サイズ80%のサイズに縮小、同様に横も同じ比率で縮小されて今度は収まりました。縦横方向のrepeatを禁止していないので、繰り返して描画されています。

サンプル（６）background-sizeを「contain」に

画像を背景領域内に収めるため、自動で縦サイズの400pxを背景領域縦サイズ250pxに縮小、同じ比率で横サイズも縮小しています。横サイズは背景領域横サイズよりも小さくなるので、右側に繰り返して描画されています。

サンプル（７）background-sizeを「cover」に

ほぼサンプル（３）と同じになります。