background-size 覚書

ブログ

background-sizeプロパティは、背景画像のサイズを指定する際に使用しますが、使用頻度が高い。なかなか覚えにくいので覚書..

長さやパーセンテージで指定する場合、値を2つ記述すると、それぞれ記述した順に幅と高さを表します。 1つだけ指定した場合には、もう1つはautoと解釈されます。負の値を指定することはできません。

■値
auto
自動的に算出される(初期値)

contain
縦横比は保持して、背景領域に収まる最大サイズになるように背景画像を拡大縮小する

cover
縦横比は保持して、背景領域を完全に覆う最小サイズになるように背景画像を拡大縮小する

長さ
背景画像の幅・高さを指定

パーセンテージ
背景領域に対する背景画像の幅・高さのパーセンテージを指定

タイトルとURLをコピーしました