background-size プロパティ
background-size プロパティは、背景画像のサイズを定義するプロパティです。
background-size プロパティに設定できる値には、auto
、cover
、contain
といった キーワード と数値があります。
数値が1つの場合は、width を設定し height は auto になります。数値が2つの場合は、width と height と設定されます。
背景画像の設定はbackground プロパティ、background-image プロパティで指定します。
ページ内 Index
構文(Syntax)
CSS
DOM ( JavaScript )
値(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 値に指定してますので、背景画像の大きさはエレメントに合わせて表示されます。
関連プロパティ
以下は関連するプロパティです。
プロパティ名 | 概要 |
---|---|
background | バックグランドプロパティの一括指定 |
background-attachment | スクロールによるバックグランドの表示位置 |
background-blend-mode | 複数の背景画像や配色を混ぜ合わせる |
background-clip | border、paddingを領域に含めるか |
background-color | CSSのColorの指定 |
background-image | 画像の挿入 |
background-origin | 繰り返し表示を開始する位置 |
background-position | 画像の配置位置 |
background-repeat | 画像の繰り返し(デフォルトは繰り返し) |
background-size | 画像のサイズ |
linear-gradient() | 線形グラデーション |
radial-gradient() | 円形グラデーション |