background-sizeの使い方[HTML&CSS]

background-sizeの使い方

background-sizeは、背景画像のサイズを指定する際に使います。

background-sizeプロパティの値の設定方法

contain	画像が要素に収まるように値を設定する
cover	画像が要素全体を完全に覆うように値を設定する
auto	自動で値を決める
pxか%	横幅・縦幅を指定する

表だけではわかりづらいと思うので、使用例や画像を使いながら解説したいと思います。

background-size: contain;

それでは、以下の使用例をご覧ください。

HTML:

 <div class="box">
   </div>

CSS:

.box {
  width: 500px;
  height: 500px;
  margin: 0 auto 50px;
  border: 2px solid #333;
  background-image: url("../hiyoko.jpg");
  background-repeat: no-repeat;
  background-size: contain;
}

ブラウザでの表示:

画像を見ていただくと、containの場合は、画像が要素内に収まるように配置されているのがわかります。

background-size: cover;

以下の使用例をご覧ください。

HTML:

 <div class="box">
  </div>

CSS:

.box {
  width: 500px;
  height: 500px;
  margin: 0 auto 50px;
  border: 2px solid #333;
  background-image: url("../hiyoko.jpg");
  background-size: cover;
}

ブラウザでの表示:

coverの場合、div要素全体を画像で覆うため、

画像の全てが収まるように値を設定するcontainとは違い、

画像の一部は切り取られる。

background: auto;

ここでは、pxや%で値を設定する場合もセットで解説します。

autoやpx、%で値を設定する場合は、

『background-size: auto 50%:』のように、

値を2つ記載します。

カッコ内の1つ目の値が横幅、2つ目の値が高さを指定しています。

それでは、以下の使用例をご覧ください。

HTML:

 <div class="box">
    </div>

 <div class="box2">
    </div>

CSS:

.box {
  width: 500px;
  height: 500px;
  margin: 0 auto 50px;
  border: 2px solid #333;
  background-image: url("../hiyoko.jpg");
  background-size: 50% auto;
}

.box2 {
  width: 500px;
  height: 500px;
  margin: 0 auto 50px;
  border: 2px solid #333;
  background-image: url("../hiyoko.jpg");
  background-size: auto 50%;
}

ブラウザでの表示:

このように、縦横どちらかに%で値を指定し、

もう片方にautoを指定すると、

画像の縦横比を自動で設定してくれる。

また、『background-size: 200px 50%;』のようにautoを使用せず設定することも可能です。

まとめ

・containは、要素に対して画像全体を収めたい場合に使用する。

・coverは、要素全体に対して画像を覆いたい場合に使用する。

・autoやpx、%を使用する場合は、値（横幅、高さ）を2つ書く。

それでは、最後まで読んでいただきありがとうございました。