CSSのbackground-sizeはcoverで全面を覆いcontainで画像全体を収める

背景領域を画像で隙間なく覆うならbackground-size: cover、画像全体を切らずに見せるならbackground-size: containを使います。どちらも画像の縦横比を保ちますが、領域と画像の縦横比が違う場合の結果は反対です。

coverは領域の空きをなくす代わりに、画像の上下または左右を領域の外へ出します。containは画像全体を収める代わりに、領域の上下または左右に空きが残ります。画像を大きく表示するかではなく、切り抜きと空きのどちらを許容するかで選びます。

coverは背景領域を覆うまで画像を拡大する

coverは、画像の縦横比を保ちながら、幅と高さの両方が背景配置領域を覆う最小の大きさへ画像を拡大または縮小します。

.hero {
  min-height: 300px;
  background-color: #263746;
  background-image: url(images/hero.jpg);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

画像と領域の縦横比が違えば、一方の寸法は領域より大きくなります。その部分は背景の描画範囲から外れるため、画像全体は表示されません。写真を面として使い、上下左右に空きを残したくない見出し領域などに向きます。

人物、商品、文字など、切れてはいけない対象が画像の端にある場合は注意が必要です。領域の形が変わるたびに、どこまで外へ出るかも変わります。

containは画像全体が収まるまで縮小する

containは、画像の縦横比を保ちながら、幅と高さの両方が背景配置領域へ収まる最大の大きさにします。

.logo-panel {
  min-height: 300px;
  background-color: #f2f2f2;
  background-image: url(images/logo.png);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
}

ロゴや図の端まで見せる必要がある場合は、containが目的に合います。ただし、画像と領域の縦横比が違えば空きが残ります。background-repeatの初期値は繰り返しなので、一枚だけ表示したい場合はno-repeatも指定します。

空いた部分にはbackground-colorが見えます。画像が読み込めない場合にも文字との明暗差を保てる色を先に指定します。

同じ画像でもcoverとcontainでは残る範囲が変わる

横1200px、縦800pxの画像を、横600px、縦300pxの背景配置領域へ置く例で比べます。画像の縦横比は3対2、領域は2対1です。

background-position: center centerなら、coverで外へ出る縦100pxは上下へ分かれます。containで残る横150pxの空きも左右へ分かれます。画像の中心ではなく左側を残したい場合は、background-position: left centerのように位置を変えます。

どこを切るかはbackground-sizeではなく、拡大縮小後の画像を置くbackground-positionで調整します。重要な対象がある方向を先に決め、領域の幅と高さを変えて確認します。

100% 100%は縦横比を保つ指定ではない

次の指定は、画像の幅と高さをそれぞれ背景配置領域の100％にします。

.panel {
  background-size: 100% 100%;
}

画像と領域の縦横比が違う場合、横方向と縦方向が別々に伸縮するため、画像は変形します。coverとcontainは固有の縦横比を保つ点が違います。

一方の寸法だけを決めたい場合は、background-size: 100% autoのように指定できます。最初の値が幅、二つ目が高さです。一つだけ指定した場合は、二つ目をautoとみなします。百分率は背景配置領域を基準にします。

background-sizeは要素自体の高さを作らない

background-sizeが変えるのは背景画像の寸法です。.heroの幅や高さ、内容量は変えません。要素に内容がなく、高さもpaddingも指定していなければ、背景画像を指定しただけでは画像の高さに合わせた領域はできません。

先に、内容、padding、height、min-heightなどで要素の領域を決めます。その領域へ画像をどう収めるかをbackground-sizeで指定します。目的と順序を逆にしないことが大切です。

伝える必要がある画像は背景だけに置かない

背景画像は装飾として扱います。CSSの背景画像に関する注意でも、重要な情報を背景画像だけで伝えないよう求めています。

商品写真、図の説明、画像内の文字など、内容として伝える必要がある画像はHTMLへ置きます。背景が無効になってもページの意味が残るかを確認し、背景画像を使う場合も、画像がない状態で文字を読める背景色を指定します。

まず、一つの領域と一枚の画像について、横幅と高さを書き出してください。空きを許容できないならcover、切り抜きを許容できないならcontainを選びます。次に領域の横長、縦長、正方形を試し、残す位置、背景色、文字の読みやすさを確認します。