HTML & CSS

最終更新日:
公開日:

リファレンス

CSS

バックグラウンド サイズ

background-sizeプロパティ

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

  • 初期値

    auto

  • 継承

    不可

  • 適用できる要素

    全要素

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;

表示例:

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

ありがとうございます。
もしよろしければ、あわせてフィードバックや要望などをご入力ください。

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