CSSで絶対に必要な背景画像を表示するbackground-imageを詳しく解説

Webサイト制作

CSS3

基礎

投稿日時 : 2024/11/09 更新日時 : 2024/11/24

背景画像を表示するにはbackground-imageというプロパティを使用するのだが、このCSSは他のプロパティと合わせて使う事により、より細かく画像表示に関する設定ができるので解説しよう。

今回使用するのは下記の画像だ。前のページのboxについてを理解している必要があるので分からないならそちらから見てほしい

まずboxに背景画像を表示するコードを書いてみる。


<style>
.box1 {
  width: 50%;
  height: 200px;
  background-image: url('画像のパス');
}
</style>
<body>
 <div class="box1"></div>
</body>

普通にbox内に画像を表示するとこうなる。見た感じ画像が一部分だけ表示されていて全体像が見えない。これを画像表示に関するプロパティを使って描画サイズや描画位置、繰り返し描画なしなどで調整していこう！

背景画像を調整できるCSSのプロパティ

下記の表以外にもいくつか画像表示に関するプロパティがあるが、この表にあるものだけ覚えればとりあえずOK！

プロパティ	値	説明
background-position	水平方向垂直方向	画像を描画する基点を決める center, top, right, bottom, leftの5つや%とpxでも指定可能中央表示はよく使われる設定で次のようにする center center
background-size	幅高さ	%やpxなどで指定するがよく使われるのは下記の予め用意されている設定だ cover : 一部が見切れる場合もあるが画像を良い感じに拡大縮小し覆うように表示する contain : 縦幅か縦幅に合わせて画像全体を表示してくれるがボックスのサイズ通りにはなりにくい
background-repeat	repeat repeat-x repeat-y no-repeat	画像を繰り返し表示する横方向だけ繰り返し表示する縦方向だけ繰り返し表示する繰り返し表示しない

上記表のサンプルを下記に表すのでチェックしてくれ。

background-positionについて

背景画像を表示すると左上が基点となりそこから描画される。画像の中心を基点にしたい場合は
background-position: center center;を指定するとよい。


.box2 {
  width: 50%;
  height: 200px;
  background-image: url('画像のパス');
  background-position: center center;
}

画像の右の2本の木を基点としたいなら
background-position : 水平方向垂直方向; なので
background-position :r ight center; にしたら良さそうだ


.box2_2 {
  width: 50%;
  height: 200px;
  background-image: url('画像のパス');
  background-position: right center;
}

画像の右側を描画しているな。このようにプロパティを使うと細かく表示を設定できる。

background-sizeについて

もっと画像全体を最大で表示したい場合がある。この場合は
background-sizeを指定するとよい。ここではcoverを使ってみよう。


.box3 {
  width: 50%;
  height: 200px;
  background-image: url('画像のパス');
  background-size: cover;
}

画像の全体像が見えるようになったな。しかし、上下が少し表示できていない事は分かるだろうか。そこで、完全に画像をフルサイズで表示するcontainの例も見てみよう。


.box4 {
  width: 50%;
  height: 200px;
  background-image: url('画像のパス');
  background-size: contain;
}

全体が表示されて良い感じですが、余った部分に繰り返し画像が表示されてしまっています。どうしたらよいですか？

これを回避するにはbackground-repeat: no-repeatを指定するとよい

background-repeatについて


.box5 {
  width: 50%;
  height: 200px;
  background-image: url('画像のパス');
  background-size: contain;
  background-repeat: no-repeat;
}

画像をフル表示できた。しかし、box5はwidthを指定しているのにcontainを指定したばかりにwidthの本来のサイズより小さく表示されている。デザインでは横幅や縦幅をよく指定するので、ボックスと画像のアスペクト比が違うなら余白ができて指定した幅より画像の描画領域が小さくなるのでcontainは少々使いにくい。多くの場合はcoverを使うと良さそうだ。