【初心者必見】CSSで背景画像のサイズを指定して背景をキレイに

Webサイトを制作するときに、背景に画像を設定することは非常に多いです。しかし、いざ背景に画像を挿入しても、うまく収まらないことがあります。

そこで、今回は背景画像のサイズを変更するためのCSSであるbackground-sizeについて解説します。

CSS3から導入されたプロパティですが、実務では大事なプロパティになります。ここでbackground-sizeを理解し、キレイな背景画像をWebサイトに使用しましょう。

CSSで背景画像のサイズを指定するのはbackground-size

背景画像のサイズを指定するはその名のとおり、background-sizeプロパティです。
ここでは、background-sizeで指定できる値とそれぞれの挙動について解説します。

background-sizeプロパティで指定できる値を以下の表にまとめました。

auto(初期値)	背景に画像を挿入した時に勝手にサイズが割り当てられる
contain	背景の幅の中に画像が全て収まるサイズになる
cover	画像の幅はそのままで、背景の幅を覆うための一番小さいサイズになる
pxなどの絶対値	指定したpxなどで画像サイズを指定する
％などの相対値	背景の幅に対しての割合で画像のサイズを指定する

それぞれの値で背景画像のサイズがどのようになるかを把握して、背景画像がキレイに見えるように工夫しましょう。

ここからは、background-sizeプロパティの値を簡単なコード例を用いて解説します。
今回は以下の画像を背景画像に挿入します。元の画像の大きさは300×217です。

background-size:auto;

autoは初期値です。背景画像のファイルの値で挿入されます。
簡単なコード例を紹介します。

HTML
<div class="haikei">
    background-size:autoの場合
</div>

CSS
.haikei{
  width: 200px;
  height: 100px;
  background-image: url(computer.jpg);
  background-size: auto;
}

上記のように、画像のサイズが何も変更されない状態で表示されます。

background-size:contain

containは、挿入する画像の全体を表示させるために画像を縮小して表示します。

HTML
<div class="haikei">
    background-size:containの場合
</div>

CSS
.haikei{
  width: 200px;
  height: 100px;
  background-color: rgb(196, 222, 223);
  background-image: url(computer.jpg);
  background-size: contain;
  background-repeat: no-repeat; /* ここでは繰り返し表示されないように指定します */
}

背景画像の全体を表示することができましたが、背景に余白ができています。背景の幅と画像の幅が合えば問題ありませんが、そうでない場合が多いです。

background-size:cover

coverは、挿入する画像の縦横比はそのままで背景の幅に合わせて最小のサイズに変更します。

HTML
<div class="haikei">
    background-size:coverの場合
</div>

CSS
.haikei{
  width: 200px;
  height: 100px;
  background-image: url(computer.jpg);
  background-size: cover;
  background-repeat: no-repeat;
}

元の画像に近い形で背景に馴染ませることができます。

background-size:〇〇px

背景画像をpxで指定することも可能です。挿入する画像と同じ縦横比でpxを指定できればいいですが、縦横比が変わってしまうと画像が伸びてしまうので注意が必要です。背景の幅に合わせても画像は伸びる可能性があります。
今回は背景の幅と同じ値を指定した際のコードを紹介します。

HTML
<div class="haikei">
    background-size:〇〇pxの場合
</div>

CSS
.haikei{
  width: 200px;
  height: 100px;
  background-image: url(computer.jpg);
  background-size: 200px 100px;
  background-repeat: no-repeat;
}

background-sizeの最初の値である200pxは画像の横幅を記述しています。右の100pxは縦幅を記述しています。

上記の画像を見てわかるように、少し縦に縮んで表示されています。
pxで指定することで自由に画像のサイズを変更できます。

background-size:〇〇%

background-sizeを％(パーセント)で指定した場合、背景の幅に対する比率で挿入する画像の大きさが変わります。
例えば、100％に指定したならば、背景の幅に合わせた比率の画像になります。
pxと同様に2つの値を指定して、前の値が横幅、後ろの値が縦幅を意味します。

HTML
<div class="haikei">
    background-size:〇〇%の場合
</div>

CSS
.haikei{
  width: 200px;
  height: 100px;
  background-color: rgb(196, 222, 223);
  background-image: url(computer.jpg);
  background-size: 50% 100%;
  background-repeat: no-repeat;
}

上記の例では、横幅を50%で指定したため、背景の幅の50%分までしか広がりません。縦幅は100%なので縦幅いっぱいまで広がっています。

CSSで背景画像のサイズを指定する方法：まとめ

今回は、CSSで背景画像のサイズを指定する方法について解説しました。

背景画像のサイズを変更するプロパティはbackground-sizeを使用し、5つの値でサイズを決定します。

背景画像を使う場面に応じて、値を使い分ける必要があるので、それぞれの挙動を再度確認しておきましょう。

背景画像のサイズは、間違った指定方法になると、画像が崩れてしまうので注意が必要です。実際に手を動かして、動きを見ながら学習していきましょう。