CSS講座 / 背景色と背景画像：cover・contain・繰り返し・位置

CSSの背景はHTMLの内容を変えずに色や画像を表示します。background-sizeのcoverは領域を埋めるため画像が切れる場合があり、containは全体を表示する代わりに空きが出る場合があります。

背景と本文の画像を使い分ける

背景色は画像のない場所や透明部分の下に見え、画像の読み込みが失敗したときにも残せます。背景画像を指定しても要素の内容になったり、高さが自動的に生まれたりはしません。空のdivにURLだけを書いても表示領域がない場合があります。

.sample {

  height: 300px;

  background-color: #e8e8e8;

  background-image: url("images/landscape.webp");

}

説明図や商品写真のように内容そのものを伝える画像には、HTMLのimgと代替テキストが適しています。CSSの背景にはalt属性を直接付けられません。この実習では比較結果を示す空の枠にアクセシブルな名前を付けていますが、実際の装飾背景すべてにroleを追加する必要はありません。

必須の説明を背景だけに入れないでください。本文画像の寸法や切り取りはレスポンシブ画像とobject-fitでも比較します。

練習画像とフォルダーを用意する

600×400ピクセルの練習用背景画像を開き、landscape.webpとして保存します。左右の木と中央の円を比較の目印にします。3:2の画像を正方形に入れることで、切り取り位置が分かりやすくなります。

background-practice/
  backgrounds.html
  images/
    landscape.webp

この例のCSSはbackgrounds.html内なので、images/landscape.webpはHTMLを基準に解決します。CSSをcss/style.cssへ移すなら、同じ画像へのパスは../images/landscape.webpです。外部CSSのURLはスタイルシート自身の位置が基準になります。

大文字小文字や実際の拡張子も確認します。MDNのbackground-image、CSSの接続自体は外部スタイルシートの読み込みを参照してください。

coverとcontainで何が変わるか

この計算は背景領域が300×300、中央配置、繰り返しなし、枠とpaddingなしという条件です。画像と領域の比率が同じならcoverとcontainが同じに見えることもあります。MDNのbackground-sizeでサイズの決め方を確認できます。

図は、同じ比率の画像がどこで切れ、どこに空きが出るかの比較です。固有の大きさや比率を持たないCSSグラデーションだけでは差が分かりにくいため、実習には固定サイズの画像を使います。

繰り返しと表示位置を変える

.repeat {

  background-size: 100px auto;

  background-repeat: repeat;

  background-position: left top;

}

.no-repeat {

  background-size: 100px auto;

  background-repeat: no-repeat;

  background-position: left top;

}

100px autoは幅を100pxにし、高さは元の比率から決めます。repeatは小さな画像を繰り返し、no-repeatは一回だけ表示します。containの空き部分にも繰り返しが現れる場合があるため、全体を一枚で比較する実習ではno-repeatを指定します。

background-positionのcenterは余りや切り取りを両側へ分け、left topは左上を基準にします。coverの位置を変えても画像の大きさ自体は変わらず、切れる側が変わります。後からbackground短縮形を追加すると、先の個別指定を初期化する場合がある点にも注意します。

完全な例を動かす

用意したフォルダーのbackgrounds.htmlに次をUTF-8で保存して開きます。同じ画像を四つの枠で使い、大きさと繰り返しを比較します。

<!doctype html>

<html lang="en">

<head>

  <meta charset="utf-8">

  <meta name="viewport" content="width=device-width, initial-scale=1">

  <title>Comparing background image sizes</title>

  <style>

    * { box-sizing: border-box; }

    body { margin: 24px; color: #333; font: 1rem/1.7 sans-serif; }

    .sample { width: 100%; max-width: 300px; height: 300px; margin-block-end: 24px;

      background-color: #e8e8e8; background-image: url("images/landscape.webp");

      background-position: center; background-repeat: no-repeat; }

    .cover { background-size: cover; }

    .contain { background-size: contain; }

    .repeat { background-size: 100px auto; background-repeat: repeat; background-position: left top; }

    .no-repeat { background-size: 100px auto; background-position: left top; }

  </style>

</head>

<body>

  <h1>Comparing background images</h1>

  <h2>cover：Fill the box</h2><div class="sample cover" role="img" aria-label="Background with left and right sides cut out"></div>

  <h2>contain：Contains the entire picture</h2><div class="sample contain" role="img" aria-label="Background with empty space above and below"></div>

  <h2>repeat: small repetition</h2><div class="sample repeat" role="img" aria-label="Background with repeated small pictures"></div>

  <h2>no-repeat：Show small once</h2><div class="sample no-repeat" role="img" aria-label="Background with only one page displayed in the upper left corner"></div>

</body>

</html>

狭い画面では枠の幅が小さくなり、高さは300pxのままです。その場合は切り取りや空きの寸法も再計算されるため、先の300×300の数値をそのまま当てはめないでください。

一条件だけ変えて比較する

1. 窓を広げ、最初の二枠が300×300であることを開発者ツールで確認します。coverの左右とcontainの上下を比べます。
2. coverのpositionだけをleft topへ変えます。左の木が多く残り、右が多く切れることを確認してcenterへ戻します。
3. containのrepeatをrepeatへ変え、空き部分に画像が繰り返されることを確認してno-repeatへ戻します。
4. .no-repeatの100px autoを100% 100%へ変え、円の比率が変わるか確認して元へ戻します。

表示されない画像と切り取りを調べる

最初に練習画像のリンクを直接開き、ファイルが表示できるか確認します。保存名・拡張子・HTMLまたはCSSからのパスを調べ、Networkの404なら場所を直します。応答が成功しているのに見えない場合は、枠の寸法と最終的なbackground-imageを確認します。

空きなく埋めたいならcover、全体を見せたいならcontainとno-repeatの組み合わせを見ます。画像の上に文字を載せる場合は明暗両方の場所で読めるかも確認します。この例では比較のため説明を枠の外に置いています。歪ませて埋める前に、切ってよい装飾か、全体が必要な内容かを判断します。