背景画像が切れるのはなぜ？background-sizeのcoverとcontainを比べよう

背景へ置いた画像が、一部しか見えなくなった。全部見えるようにすると、今度は箱に空きができる。同じ画像でも、「全体を見せる」のか「箱を覆う」のかで、選ぶ指定が変わるよ。

このページではCSSのbackground-sizeを切り替え、画像が見える範囲を比べられるようになる。準備はブラウザだけ。作例には三色の編集部作成画像を使い、写真やアカウントを用意する必要はないよ。

背景画像と、箱の大きさは別

background-imageは、要素の背景に使う画像を選ぶ指定。background-sizeは、その背景画像をどの大きさで描くかを選ぶ指定だよ。画像を置けば、それに合わせて箱の高さが自動で作られるわけではない。

今回の元画像は300×150pxの横長、入れ物は180×180pxの正方形。左がピンク、中央が紫、右が黄色で、中央に白い丸がある。違う縦横比の二つを重ねて、見える場所を観察しよう。

.stage {
  width: 180px;
  height: 180px;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

このほかにbackground-imageへ画像を指定する。作例は狭い場所では箱の幅も縮め、正方形を維持しているよ。

containは、画像の全体を収める

containは、画像の縦横比を保ちながら、画像全体が背景を置く領域の中へ入る大きさにする値。今回の180px四方では、横長画像を180×90pxにして表示する。

中央に置くため、上下にそれぞれ45pxの空きができる。その場所には、作例の淡い背景色が見えるよ。空いているのは画像が読み込めなかったからではなく、画像全体を収めた結果なんだ。

ただし、contain自体が繰り返しを止めるわけではない。今回のno-repeatを外すと、空いている部分に同じ画像が繰り返される場合がある。大きさと繰り返し方は別々に見よう。

coverは、領域を覆う大きさにする

coverも縦横比を保つけれど、背景を置く領域を覆うまで大きくする。今回の条件なら360×180pxへ拡大するので、180px幅の箱の外にはみ出す部分が見えなくなる。

coverは、写真そのものを切り抜いた新しいファイルへ保存する操作ではないよ。元画像を使ったまま、箱の中へ描く範囲が変わる。ほかの場所で同じ画像を使っても、その画像ファイルが書き換わることはない。

動かしてみよう

1. containの状態で、左のピンク、中央の紫、右の黄色を見る。上下の淡い背景色も確かめる。
2. coverへ切り替え、淡い空きがなくなり、中央では左右の色が見えなくなることを見る。
3. coverのまま、位置をleft centerへ変える。左側が残り、右側が切れることを比べる。
4. right centerへ変えて、右側を残した状態も見る。
5. 「最初から試す」でcontain・centerへ戻す。

ここで使うcenterは中央、left centerは左寄せで縦は中央、right centerは右寄せで縦は中央という指定。大きさを変える係と、どの場所を見せるかの係は別なんだ。

思ったように見えないときは、順に確認

全部を見せたいのに切れるならbackground-sizeを、見せたい端が消えるならbackground-positionを確認しよう。同じ画像が並んでいるならbackground-repeatを見る。

何も表示されない場合は、background-imageのURLと、箱に実際の幅・高さがあるかも確認したい。まず作例をリセットして、同じ条件へ戻してから自分の指定と比べると探しやすいよ。

本文として意味のある図や、説明に必要な写真なら、背景だけへ情報を閉じ込めないようにしよう。通常のimg要素に代替テキストを付けて見せる方法もある。imgの描画範囲を扱うobject-fitは似た値を持つけれど、指定する対象は別だよ。

繰り返し方はbackground-repeat、img要素ならobject-fitのcoverとcontainへ。画像の説明はimgのaltの役割でも確認できるよ。

2026年11月1日にMDNの背景サイズと繰り返しの関係を確認。240px・319px・1280px幅のChromiumで切り替えとリセットを確かめ、contain・coverの描画もピクセルで照合した。