CSSの背景画像のサイズ指定「backgrouond-size」の使い方

2019年9月25日

CSSの背景画像サイズの指定は、いくつかあるのでちゃんと理解しておきたい。誰かわかりやすく解説してほしい！

確かにCSSの背景画像サイズの指定は、CSSの基本なのでしっかり理解しておきたい。そこで今回は背景画像サイズを指定できる「値」を分かりやすく説明していこう！

まずは、背景画像のサイズ指定に使える「値」の一覧をみて、どんな値があるか知っておこう！

背景画像のサイズ指定の「値」の一覧

cover	画像の縦横比を保持したまま、背景領域を余白が見えないように最小サイズで覆い尽くすサイズに背景画像サイズを自動調整
contain	画像の縦横比を保ったまま、背景画像の領域内に収まる範囲で、背景画像が切れずにすべて表示されるサイズに背景画像を自動調整
auto	元画像のサイズをそのまま表示し、サイズ調整はしない
数値＋単位	`30px 50px`のように背景画像の幅と高さの順に半角スペースで区切って、単位付きの数値で指定。1つだけ指定した場合は、高さがautoになる。
%値	`20% 30%`のように背景画像の幅と高さの順に半角スペースで区切って、%で指定する事で、親ボックスの領域に対する％の割合に画像サイズを表示。 1つだけ指定した場合は、高さはautoになる。

それでは、各「値」を事例を見ながら順番に解説していこう。まずは事例に使うサンプル画像はこちら。同じ画像を使っていろんな値を指定するので、その違いを見て理解しよう！

背景画像に使うサンプル元画像

このサンプル画像は300px × 300pxで、この元サイズとの違いに注目して、それぞれの「値」の特徴を掴んでいこう！

background-size: cover;

coverは、画像の縦横比を保持したまま、背景領域の余白が見えないように可能な限り最小サイズで覆い尽くすサイズに背景画像を自動調整してくれる値。

CSS

.test{
  background-size: cover;
  background-repeat: no-repeat;
  height:150px; /*わかりやすいように高さ指定*/
}

ブラウザ表示 background-size: cover;

背景の余白が見えないように、背景画像で覆い尽くすのが「cover」

「全画面背景写真などのデザイン」の場合に使える値で、ブラウザサイズを縦に伸ばしても横に伸ばしても、背景画像で埋め尽くされているようなデザインにできるのだ！

background-size: contain;

containは、画像の縦横比を保ったまま、背景画像が切れずにすべて表示されるサイズに背景画像を自動調整してくれる値。

背景画像を「全部見せたい」時に使うといいだろう。

CSS

.test{
  background-size: contain;
  background-repeat: no-repeat;
  height:200px; /*わかりやすいように高さ指定*/
}

ブラウザ表示 background-size: contain;

画像がすべて見えるように背景画像の領域内に収まる範囲で、画像サイズを調整するのが「contain」

background-size: auto;

autoは、元画像のサイズをそのまま表示し、サイズ調整はしない値。

CSS

.test{
  background-size: auto;
  background-repeat: no-repeat;
  height:200px; /*わかりやすいように高さ指定*/
}

ブラウザ表示 background-size: auto;

元画像のサイズをそのまま表示し、サイズ調整はしないのが「auto」

background-size: ○○px;

30px 50pxのように背景画像の幅と高さの順に半角スペースで区切って、単位付きの数値で指定。

CSS

.test{
  background-size: 100px 180px;
  background-repeat: no-repeat;
  height:200px; /*わかりやすいように高さ指定*/
}

ブラウザ表示 background-size: ○○px;

指定したサイズそのままのサイズに調整して表示するのが「px指定」。100px 180pxのように横、縦の順番で半角スペースを空けて指定するのだが、縦横比が元画像と違えば、上記例のように「いびつな画像」になってしまう。

画像がいびつに変形するのを避ける場合は次の例のように「1つの数字だけ」を入れるとその数字が横幅の指定となり、高さはautoとなる

CSS

.test{
  background-size: 180px;
  background-repeat: no-repeat;
  height:200px; /*わかりやすいように高さ指定*/
}

ブラウザ表示 background-size: ○○px;

background-size: 180px;のように１つのサイズだけ入れると横幅が180pxで高さがautoのサイズになりいびつに変形されるのを防ぐ事ができる。

もし縦サイズで指定したければbackground-size: auto 100px;のように横をauto 縦を数値指定すればよい

CSS

.test{
  background-size: auto 100px;
  background-repeat: no-repeat;
  height:200px; /*わかりやすいように高さ指定*/
}

background-size: ○○%;

50% 50%のように背景画像の幅と高さの順に半角スペースで区切って、%で指定する事で、親ボックスの領域に対する％の割合に画像サイズを表示。

CSS

.test{
  background-size: 50% 50%;
  background-repeat: no-repeat;
  height:200px; /*わかりやすいように高さ指定*/
}

ブラウザ表示 background-size: ○○%;

親ボックスの領域に対する％の割合に画像サイズを表示するのが「%指定」。50% 50%のように横、縦の順番で半角スペースを空けて指定するのだが、縦横比が元画像と違えば、上記例のように「いびつな画像」になってしまう。

これもbackground-size: 50%;のように１つだけ指定した場合は、縦の割合がautoになる。

また「高さの％だけ」で指定したい場合はbackground-size: auto 50%;のように指定すればよい。