最終更新日
background-sizeプロパティは、background-imageで指定した背景画像のサイズを指定します。複数の背景画像を指定してある場合は、それぞれの画像のサイズをカンマで区切って指定できます。
サイズは、長さやパーセントを表す1個か2個の値で指定できます。2個の値を指定する場合は半角スペースで区切ります。
また、キーワードの「contain」や「cover」を使用すると、background-originで指定した配置基準のボックスに対応するサイズの画像を指定可能です。
初期値 | 適用先 | 継承 |
---|---|---|
auto | すべての要素 | なし |
値 | 説明 |
---|---|
長さ | 「px」や「em」などのサイズで画像の幅と高さを指定する。最初の値は画像の幅、2個目の値は画像の高さとなる。指定した値が1個の場合、2個目の値はautoとなる。マイナスの値は指定できない。 |
パーセント値 | パーセント値で画像の幅と高さを指定する。最初の値は画像の幅、2個目の値は画像の高さとなる。指定した値が1個の場合、2個目の値はautoとなる。マイナスの値は指定できない。 |
auto | 自動で画像の幅と高さを指定する。最初の値は画像の幅、2個目の値は画像の高さとなる。指定した値が1個の場合、2個目の値はautoとなる。マイナスの値は指定できない。(初期値) |
contain | 画像の縦と横の比率を保ったまま、配置領域内にすべて収まる最大のサイズに画像を調整する。 |
cover | 画像の縦と横の比率を保ったまま、配置領域をすべて覆う最小のサイズに画像を調整する。 |
background-size: 100% 100%; background-size: 15px 15px; background-size: 50% auto; background-size: auto 4em; background-size: auto; background-size: 3em;