background-sizeについて解説

1.background-size とは

background-size とは、背景画像の大きさを指定するプロパティです。

2.background-size の指定方法

主な指定方法は auto、contain、cover、数値+単位、% の5つです。

background-size を auto で指定

background-size を auto で指定したときは、元の画像の大きさで表示します。

要素の高さと幅が画像よりも大きい場合は画像を要素内に繰り返して表示します。

それでは指定方法と実際の表示を見ていきましょう。

<div class="background-auto"></div>

.background-auto {
  /* 画像のサイズは 横：320px 縦：180px */
　background-image: url(../images/post/background-size.png);
　background-size: auto;
　width: 100%;
　height: 500px;
}

上記のように background-size を auto で指定したときは、元の画像の大きさで表示し、要素の高さと幅が画像よりも大きい場合は画像を要素内に繰り返して表示されます。

background-size を contain で指定

background-size を contain で指定したときは、画像全体が表示されるように縦横比を維持したまま拡大、縮小します。

要素の高さと幅が画像よりも大きい場合は画像を要素内に繰り返して表示します。

それでは指定方法と実際の表示を見ていきましょう。

<div class="background-contain"></div>

.background-contain {
  /* 画像の比率は 16:9 (横：縦)  */
　background-image: url(../images/post/background-size.png);
　background-size: contain;
　width: 100%;
　height: 500px;
}

上記のように background-size を contain で指定したときは、画像全体が表示されるように縦横比を維持したまま拡大、縮小します。

また、auto と同じように要素の高さと幅が画像よりも大きい場合は画像を要素内に繰り返して表示されます。

background-size を cover で指定

background-size を cover で指定したときは、表示領域全体を背景画像で覆うようにして縦横比を維持したまま拡大、縮小します。

それでは指定方法と実際の表示を見ていきましょう。

<div class="background-cover"></div>

.background-cover {
　background-image: url(../images/post/background-size.png);
　background-size: cover;
　width: 100%;
　height: 500px;
}

上記のように background-size を cover で指定したときは、表示領域全体を背景画像で覆うようにして縦横比を維持したまま拡大、縮小します。

background-size を 数値+単位 で指定

background-size では px、em、rem を使って背景画像の大きさを指定することができます。

それでは指定方法と実際の表示を見ていきましょう。

<div class="background-px"></div>

.background-px {
　/* 画像のサイズは 横：320px 縦：180px */
　background-image: url(../images/post/background-size.png);
　/* background-size: 横 縦; */
　background-size: 300px 200px;
　width: 100%;
　height: 500px;
}

上記のように background-size を 数値+単位 で指定したときは指定した通りの大きさになります。

今回は 300px 200px で指定しているので横幅300px、高さ200pxの大きさの背景画像が表示されます。

こちらも auto や contain と同じように要素の高さと幅が画像よりも大きい場合は画像を要素内に繰り返して表示されます。

background-size を % で指定

background-size を % で指定したときは、要素全体の横幅と高さに対しての割合で大きさが決まります。

要素全体に対しての割合で大きさが決まるため、拡大、縮小する際は縦横比を維持しません。

それでは指定方法と実際の表示を見ていきましょう。

<div class="background-percent"></div>

.background-percent {
　/* 画像のサイズは 横：320px 縦：180px */
　background-image: url(../images/post/background-size.png);
　/* background-size: 横 縦; */
　background-size: 50% 30%;
　width: 100%;
　height: 500px;
}

上記のように background-size を % で指定したときは、要素全体の横幅と高さに対しての割合で大きさが決まります。

今回は 50% 30% で指定しているので横幅は全体の50%、高さは全体の30%の大きさで背景画像が表示されます。

この記事では background-size について解説しました。

background-size は背景画像の大きさを指定するプロパティです。

主な指定方法は auto、contain、cover、数値+単位、% の5つです。

この記事を見て使い分けられるようになると嬉しいです。

最後までお読みいただきありがとうございます。