【簡単コード】CSSによる背景画像の拡大・縮小(リサイズ)を理解しよう

こんにちは、トム＠Webプログラマーです。

先日、imgタグで描画される画像のリサイズ(拡大・縮小)について解説しました。今回はimgタグの画像ではなく「背景画像」に対するリサイズの動作を確認してみようと思います。

いつものことですが私、昔はこの２つが頭の中でごちゃごちゃになっていて、意図する動作をさせるのに苦労したことがあります。前回はimgタグについてみっちりやりましたので、今回は背景画像について余すところなく理解していきたいと思います。

今回、以下の解像度が異なる2種類の画像を背景として利用します。

背景画像の描画領域の設定

最初に背景画像を描画する領域を設定しておきます(bgimg-areaクラス)。描画領域はブラウザ幅の80%、高さ400ピクセルの領域にします。なお1点お断りですが、今回はコードをシンプルにするために以前にご紹介したリセットCSS(ress)を使用しておりません。リセットCSSを使う場合、動作が異なる場合がありますのでその点はご了承ください。

HTML

  <h1>背景画像の描画領域</h1>
  <div class="bgimg-area">
  </div>

CSS

.bgimg-area{
  /* 背景画像を描画する領域の指定 */
  width:80%;
  height:400px;
  border:2px solid #000000; /*領域に黒の枠線を引く */
  margin:0 auto; /* 領域をセンタリング */
}

実行結果

See the Pen bgimg_00 by トム@株＆不動産投資・Webプログラマー (@roby_tom) on CodePen.

なおこれ以降、CSSで背景画像の指定や各種プロパティを記述しますが、上記のCSSコードのbgimg-areaクラスへの追記部分のみを記述します。

背景画像の指定には “background-image”プロパティを利用する

背景画像(大)を指定

/* 背景画像(大)の指定 */
background-image:url('https://drive.google.com/uc?export=view&id=1UT3PokdXmPJPUpaQ-kV0WpWgKo3Yfano');

See the Pen bgimg_01 by トム@株＆不動産投資・Webプログラマー (@roby_tom) on CodePen.

背景画像(小)を指定

/* 背景画像(小)の指定 */
background-image:url('https://drive.google.com/uc?export=view&id=16_IzHCuEpAxDohluKcVm3aQBz_04snNM');

See the Pen bgimg_02 by トム@株＆不動産投資・Webプログラマー (@roby_tom) on CodePen.

背景画像を指定するには、 background-image プロパティを使用します。上記で背景画像の大と小を指定してみました。背景画像大の場合は描画領域が画像より小さいため画像の左上部分だけが表示されています。そして背景画像小の場合は描画領域が画像よりも大きく、画像が連続してタイル状に描画されています。つまりこのプロパティだけでは背景画像の拡大や縮小は行われません。これらが background-image の基本動作になります。

なお(今回未使用の)リセットCSSの中には、”background-repeat: no-repeat”を設定するものがあり、これにより上述の背景画像小の場合に連続描画されなくなる(左上に画像が１つだけ描画される)ものがありますので留意してください。

背景画像を拡大・縮小する”background-size”プロパティ

背景画像を拡大・縮小するプロパティは background-size”です。このプロパティに色々な値を指定することで、様々な動作をさせることができます。以下に代表的なものを解説していきます。

描画領域を背景画像で覆う設定・・・cover

/* 描画領域を背景画像で覆う */
background-size:cover;

実行結果（背景画像　大）

See the Pen bgimg_03 by トム@株＆不動産投資・Webプログラマー (@roby_tom) on CodePen.

実行結果（背景画像　小）

See the Pen bgimg_04 by トム@株＆不動産投資・Webプログラマー (@roby_tom) on CodePen.

指定した背景画像で描画領域を覆うための設定が、”background-size:cover”です。上記の結果を見ていただけるとわかる通り、背景画像の大小にかかわらず、描画領域全体を1枚の背景画像が覆っているのがわかります。なお背景画像の縦横比と描画領域の縦横比が合わない場合は、縦と横のどちらかがトリミングされて表示されることに留意しましょう。

描画領域に必ず背景画像の全体を描画する設定・・・contain

/* 描画領域に背景画像全体を表示する */
  background-size:contain;
 

実行結果（背景画像　大）

See the Pen bgimg_05 by トム@株＆不動産投資・Webプログラマー (@roby_tom) on CodePen.

実行結果（背景画像　小）

See the Pen bgimg_06 by トム@株＆不動産投資・Webプログラマー (@roby_tom) on CodePen.

描画領域に対し、必ず背景画像の全体を表示させる設定が”background-size:contain”です。画像の縦横比と領域の縦横比が一致しない場合は、背景画像が連なって表示されます。

絶対指定(ピクセル指定)と相対指定(パーセント指定)

絶対指定(ピクセル指定)の動作

 /* 描画領域に対して背景画像の横幅をピクセル指定 */
  background-size:400px auto;

実行結果　（背景画像　大）

See the Pen bgimg_07 by トム@株＆不動産投資・Webプログラマー (@roby_tom) on CodePen.

相対指定（パーセント指定）の動作

/* 描画領域に対して背景画像の横幅をパーセント指定 */
  background-size:50% auto;

実行結果　（背景画像　小）

See the Pen bgimg_08 by トム@株＆不動産投資・Webプログラマー (@roby_tom) on CodePen.

background-sizeプロパティでは、絶対指定(ピクセル指定)や相対指定(パーセント指定)も行うことができます。上記の実行結果を確認しましょう。まず背景画像大の横幅を400pxに指定すると、指定通りの画像にリサイズ（縮小）されています。heightにautoを指定していますので画像の縦横比は維持されています。描画領域が400pxよりも大きい場合は背景画像が連続して表示されます。また背景画像小の横幅を50%に指定した場合は、描画領域の横方向にぴったり2列並んだ形で描画されています。

背景画像を画面(ブラウザ)全体に合わせる方法

これまでは描画領域をブラウザの特定の領域に限定していましたが、最後にブラウザの幅と高さに背景画像の大きさを合わせる方法について解説します。

.bgimg-area{
  /* 背景画像(大)の指定 */
  background-image:url('https://drive.google.com/uc?export=view&id=1UT3PokdXmPJPUpaQ-kV0WpWgKo3Yfano');

  /* 背景画像をブラウザに合わせる */
  width:100%;
  height:100vh;
  background-size:cover;
  background-position:center center;
}

See the Pen by トム@株＆不動産投資・Webプログラマー (@roby_tom) on CodePen.

重要なポイントはwidth:100%とheight:100vhの指定です。この指定によりブラウザのサイズ＝bgimg-areaクラスのサイズとなります。vhはビューポート（ブラウザのサイズ）の高さに対する割合を示す指定で、100vhはブラウザと同じ高さの指定となります。「height:100%ではだめなのか？」という疑問を持たれるかもしれませんが、パーセント指定は親要素に対する高さ100%を指定することになるので、htmlの記述によってはブラウザの高さと一致しない場合が出てきます。

その上で”background-size:cover”を指定することで、画面を背景画像で覆う指定となります。” background-position:center center”のプロパティは、背景画像の表示を画像の中心にポジショニングさせる指定です。ですのでcodepenで実行結果を見ますと、画像の真ん中にある解像度の記述部分が表示されていて、画像の上下がトリミングされていることが分かります。

以上、CSSによる背景画像の拡大・縮小(リサイズ)について解説しました！