Feb. 15th,2020
プロパティについて
＃
概要
| 初期値 | “background-size: auto;” |
| 適用対象 | すべての要素 |
| 継承 | No |
| パーセント値 | 背景の描画領域の寸法を“100%”とする |
| 計算値 | “<length-percentage>”値の算出された値もしくはキーワードで表されたサイズをアイテムとするリスト |
| アニメーション | 繰り返し可能なリスト |
“background-size”プロパティは背景画像の大きさを指定するプロパティです。
サンプルコード
div { background-size: 50px auto;}
＃
値
| 値 | 説明 |
|---|---|
| キーワード値 | |
| contain | 画像に自然アスペクト比があればその比率を保持しながら、背景の描画領域に収まる最大の大きさで背景画像を描画する |
| cover | 画像に自然アスペクト比があればその比率を保持しながら、背景の描画領域をすべて覆うことができる最小の大きさで背景画像を描画する |
| auto | 画像に自然アスペクト比があればその比率を保持しながら画像を拡大もしくは縮小して背景画像を描画する (画像に自然アスペクト比がない場合は画像の自然サイズ、自然サイズもなければ“100%”として扱います。) |
| “<length-percentage>”値 | |
| <length> | “px”、“em”などで背景画像の大きさを指定 |
| <percentage> | 背景の描画領域の横幅、高さを“100%”として背景画像の大きさを指定 |
| 他の値 | |
| 共通キーワード | |
＃
値の指定方法
“contain”もしくは“cover”を使用する場合
値に““contain”、“cover”を指定する場合は値は1個だけ指定できます。
“auto”、“<length>”値、“<percentage>”値を使用する場合
値に“auto”もしくは“<length>”値、“<percentage>”値を指定する場合は値を1個、もしくは2個指定することができます。
値が2個の場合は1個目の値が背景画像の横幅を指定し、2個目の値が背景画像の高さを指定します。2個目の値が省略され、値が1個だけである場合は背景画像の高さは“auto”として扱われます。
background-size: 〚背景画像の横幅〛 〚背景画像の高さ〛;
background-size: auto 〚背景画像の高さ〛;
background-size: 〚背景画像の横幅〛 auto;
値が“auto”だけである場合は背景画像は画像の本来の大きさ(自然サイズ)で描画されます。
background-size: auto;
background-size: auto auto;
なお、背景画像として指定された画像が大きさが決まっていない(自然サイズがない)場合には“auto”は“100%”とみなされます。
複数の背景画像を指定する
“background-image”プロパティで複数の背景画像が指定されている場合、値のセットをコンマ(“,”)で区切って記述することでそれぞれの背景画像の大きさを指定することができます。値の順番は“background-image”で指定した値の順番に対応します。
div {
background-image: url(sample/background_sample.png), url(background_sample2.png);
background-repeat: no-repeat, no-repeat;
background-size: 50px 50px, cover;
}
＃
使用例
＃
キーワード値で指定する
div {
background-repeat: no-repeat;
background-image: url(background_sample.png);
background-size: contain;
}
background-size: contain;
div {
background-repeat: no-repeat;
background-image: url(background_sample.png);
background-size: cover;
}
background-size: cover;
div {
background-repeat: no-repeat;
background-image: url(background_sample.png);
background-size: auto;
}
background-size: auto;
＃
＃
“<percentage>”値で指定する
div {
background-repeat: no-repeat;
background-image: url(background_sample.png);
background-size: 50%;
}
background-size: 50%;
div {
background-repeat: no-repeat;
background-image: url(background_sample.png);
background-size: auto 50%;
}
background-size: auto 50%;
div {
background-repeat: no-repeat;
background-image: url(background_sample.png);
background-size: 50% 50%;
}
background-size: 50% 50%;
＃
