CSSリファレンス
background-sizeの意味と使い方
「background-size」は背景画像の表示サイズを指定します。「実数値+単位」「パーセント値+%」「auto」の組み合わせや「contain」や「cover」を指定する方法とがあります。
値の指定方法
contain
幅と高さの比率を保持したまま、画像全体が表示領域に治る最大サイズで表示します。
cover
幅と高さの比率を保持したまま、その画像1つだけで表示領域を覆える最小のサイズで表示します。
実数値+単位、パーセント値+%、auto
画像の幅と高さを半角スペースで区切って指定します。1つ目の値が幅、2つ目の幅が高さになります。
「実数値+単位」では、数値に単位を付けて指定します。「パーセント値+ %」では、基準の表示領域に対する割合でサイズを指定します。基準の表示領域はbackground-originプロパティで指定できます。デフォルトはパディング領域です。
幅と高さのいずれかの値に「auto」を指定すると、幅と高さの比率を保持したまま画像のサイズが変更されます。また、値を1つだけ指定した場合は幅を指定したことになり、高さは「auto」に設定されます。「auto」のみを指定した場合は、画像本来のサイズで表示されます。