background-sizeプロパティ

背景画像の表示サイズを指定します。

値

背景画像の表示サイズを自動的に調整します。基本的には画像の元サイズになります。

background-size: auto;

表示例：

画像の縦横比を保ったまま、要素の横幅いっぱいになるよう表示します。

background-size: cover;

表示例：

画像の縦横比を保ったまま、要素の高さいっぱいになるよう表示します。

background-size: contain;

表示例：

幅と高さを半角スペースで区切って指定します。要素の横幅、高さに対して「%」で指定します。もし値が1つ指定の場合、2つ目の値はautoになります。

値を成り行きにしたい場合は「auto」を指定してください。下記の例では横幅のみ30%で指定し、高さは自動調整にしています。autoを使用すると、縦横比を保ったサイズ指定となります。

background-size: 30% auto;

表示例：

background-size: auto 100px;

表示例：