background-sizeプロパティ

値

auto

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

CSSコード例

background-size: auto;

表示例：

cover

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

CSSコード例

background-size: cover;

表示例：

contain

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

CSSコード例

background-size: contain;

表示例：

%値

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

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

CSSコード例

background-size: 30% auto;

表示例：

任意の数値

CSSコード例

background-size: auto 100px;

表示例：

こちらの記事は役に立ちましたか？

コメントありがとうございます！
運営の参考にさせていただきます。