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

background-sizeプロパティ

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

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

背景画像をエレメントの大きさに合わせる(Exampleを参照
background-image: url('img/example.png');
background-size: cover;

 背景画像の設定はbackgroundプロパティbackground-imageプロパティで指定します。

関連プロパティ

 以下は関連するプロパティです。

プロパティ名概要
backgroundバックグランドプロパティの一括指定
background-attachmentスクロールによるバックグランドの表示位置
background-blend-mode複数の背景画像や配色を混ぜ合わせる
background-clipborder、paddingを領域に含めるか
background-colorCSSのColorの指定
background-image画像の挿入
background-origin繰り返し表示を開始する位置
background-position画像の配置位置
background-repeat画像の繰り返し(デフォルトは繰り返し)
linear-gradient()線形グラデーション
radial-gradient()円形グラデーション

構文(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

 background-sizeの表示例です。cover値に指定してますので、背景画像の大きさはエレメントに合わせて表示されます。