備忘録的プログラミングリファレンス

background-sizeプロパティ

 background-sizeプロパティは、背景画像のサイズを定義するプロパティです。

 background-sizeプロパティに設定できる値には、"auto"、"cover"、"contain"といったkeywordと数値があります。 数値が1つの場合は、widthを設定しheightはautoになります。数値が2つの場合は、widthとheightとみなします。

構文(Syntax)

CSS

background-size: auto | length | % | cover | contain;

DOM(JavaScript)

値の取得
String=object.style.backgroundSize;
値の設定
object.style.backgroundSize="_value_";

Values

Value摘要
auto初期値(default value)。左上の端。
length数値で設定。CSSの長さの単位。1つ目がwidth、2つ目がheight。1つだけではwidth値になって、heightはautoになる。
%割合で設定。1つ目がwidth、2つ目がheight。1つだけではwidth値になって、heightはautoになる。
coverエレメント全体に引き伸ばして表示。横方向もしくは縦方向に合わせる。表示し切れない部分もでる。
contain背景画像の全体を表示する。
initial初期値に戻す。
inherit親エレメントのプロパティを継承。

備考(Remarks)

初期値(Default value)auto
継承(Inherited)no
変化(Animatable)yes

Example