CSS3で初めて導入された「background-size」とは、その名称通り、背景のサ
イズに関するプロパティです。
表示領域に応じて、自動的にサイズを調整するという技術になります。
背景に関するプロパティ自体は以前から存在していましたが、背景のサイズを
CSSで自動調整する技術の登場は、CSS3が初めてとなります。
このプロパティの最大の利点は、背景を自分で調整する手間が省けるという点
です。また、手動で設定する際に生じる、ミスやズレを完全に無くせるという
点も、このプロパティの大きな利点です。
例えば、「background-size: contain;」と指定します。
この「contain」を値として指定すると、背景画像の表示領域に対し、指定し
ている画像がきちんと収まるサイズになります。
無理矢理画像を拡大する事なく、その画像をいくつも敷き詰めるという形にな
ります。
元のサイズが小さい画像の場合は、その画像が背景表示範囲中にびっしりと並
ぶという事になります。
一方、背景領域を一枚で収めたい場合には、「background-size: cover;」
という指定を行います。
この「cover」によって画像が拡大され、その画像一枚のみで背景領域を覆う事
が出来ます。
また、任意で背景画像の大きさを指定する場合は、
「background-size: 100px 120px;」等のように指定します。