最終更新日 2021年6月24日

background-sizeプロパティ

background-sizeプロパティは、background-imageで指定した背景画像のサイズを指定します。複数の背景画像を指定してある場合は、それぞれの画像のサイズをカンマで区切って指定できます。

サイズは、長さやパーセントを表す1個か2個の値で指定できます。2個の値を指定する場合は半角スペースで区切ります。

また、キーワードの「contain」や「cover」を使用すると、background-originで指定した配置基準のボックスに対応するサイズの画像を指定可能です。

CSS3での変更点

・background-sizeは、CSS3から新しく追加されたプロパティです。

初期値	適用先	継承
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;

参考文献：CSS Backgrounds and Borders Module Level 3

当サイトの活動をサポートしてみませんか？気軽にクリエイターの支援ができます。