CSS backgroundプロパティ一覧｜cover・中央寄せ・繰り返し早見表

CSSのbackgroundとは、要素の背景に色・画像・グラデーションを表示するためのプロパティ群で、8つの個別プロパティと、それらをまとめて書ける一括指定 background があります。 よく使うのは「画像を全面に敷く（cover）」「中央に寄せる（center）」「繰り返さない（no-repeat）」の3つですが、組み合わせ方や書き順でつまずきやすい部分でもあります。

この記事では、8プロパティの値と初期値の一覧表、cover・contain・auto・％指定を同じ画像に当てて測った表示結果、一括指定の書き順、そのまま貼って使えるコード集、画像が表示されない・切れる・ずれるときのチェックリストをまとめました。数値は Chromium 141（Playwright 1.56）で実際に描画し、スクリーンショットの画素から測ったものです。

background系プロパティの早見表

初期値は、何も指定していない div を getComputedStyle() で読み取った結果です。

やりたいことから探す場合はこちらです。

検証した環境

背景画像の基本の書き方

背景画像は background-image: url(...) で指定します。初期値のままだと画像は左上から縦横に繰り返され、元の大きさで表示されます。

.box {
  width: 300px;
  height: 200px;
  background-color: #eee;                /* 画像が読み込めないときの色 */
  background-image: url("img/photo.jpg");
  background-repeat: no-repeat;           /* 繰り返さない */
  background-position: center;            /* 中央に置く */
  background-size: cover;                 /* 箱いっぱいに広げる */
}

img 要素と違い、背景画像は要素の大きさに影響しません。 中身のない div に背景画像だけを指定すると、高さが0のままなので何も見えません（後のチェックリストで再現します）。背景は「箱を塗るもの」で、箱の大きさは別に決める、と考えると整理しやすくなります。

background-size：cover・contain・auto・％の違い

300×200pxの箱（縦横比3:2）に、200×100pxの画像（縦横比2:1）を no-repeat で敷き、background-size だけを変えて測りました。

<style>
  .b {
    width: 300px; height: 200px;
    background-color: blue;
    background-image: url("red-200x100.svg");
    background-repeat: no-repeat;
  }
</style>
<div class="b" style="background-size: cover"></div>

実行結果（位置は初期値の左上）：

cover と auto 100% の「描かれる大きさ」は、見えた範囲が箱全体だったことと縦横比（2:1）からの計算値です。

違いを一言でまとめると次のとおりです。

％は「画像の元の大きさ」ではなく「箱（背景を配置する領域）の大きさ」に対する割合です。 50% は箱の幅300pxの半分で150pxになりました。

coverで切れる位置はbackground-positionで決まる

cover は必ずどこかが切れます。どこを残すかは background-position で決めます。

.hero   { background: url(photo.jpg) center / cover no-repeat; }      /* 中央を残す */
.member { background: url(face.jpg) center top / cover no-repeat; }   /* 上側（顔）を残す */
.banner { background: url(wide.jpg) right center / cover no-repeat; } /* 右側を残す */

background-position：中央寄せと位置の指定

同じ箱（300×200px）と画像（200×100px、background-size: auto）で、位置だけを変えて測りました。

値の書き方は4通りあります。

％指定がずれて見える理由

background-position: 50% は「左から箱の50%の位置に画像の左端を置く」のではなく、「箱の50%の点と、画像の50%の点を重ねる」という意味です。計算式は次のとおりです。

画像の左端の位置 =（箱の幅 − 画像の幅）× ％

上の実測でも、center（50%）のとき (300 − 200) × 50% = 50px、right（100%）のとき (300 − 200) × 100% = 100px となり、式どおりでした。このおかげで 0% は左端、100% は右端にぴったり揃います。一方、画像が箱と同じ幅（contain や 100% で幅がそろった状態）だと差が0になり、％をいくつにしても横には動きません。 「位置を変えても動かない」ときは、この状態になっていないか確認します。px で指定した場合は、単純に左上からの距離になります。

background-repeat：繰り返しの指定

2値で repeat no-repeat と書いた要素の計算値を読むと repeat-x になっていました。repeat-x は「横は繰り返す・縦は繰り返さない」の短縮形だとわかります。space round は space round のまま保持されました。

初期値の repeat のまま200×100pxの画像を300×200pxの箱に敷くと、箱全体が画像で埋まり、背景色は見えなくなりました。写真を1枚だけ表示したいときに no-repeat を書き忘れると、小さい画像がタイル状に並びます。

/* ドット柄を敷き詰める（繰り返しを活かす例） */
.dots {
  background-color: #f7f7f7;
  background-image: radial-gradient(#bbb 1px, transparent 1px);
  background-size: 16px 16px;  /* 1マスの大きさ。repeat は初期値のまま */
}

background-origin と background-clip

2つとも「どの領域を基準にするか」を決めますが、役割が違います。

枠線10px・padding 20pxを付けた300×200pxの箱（box-sizing: border-box）で測りました。

background-clip は背景画像だけでなく背景色にも働く点がポイントです。padding の部分を透明に抜きたいときに使えます。background-clip: text は文字の形で背景を切り抜く値で、Chromium 141 では CSS.supports('background-clip', 'text') が true でした。

/* 文字をグラデーションで塗る */
.gradient-text {
  background: linear-gradient(90deg, #06c, #c0f);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}

一括指定 background の書き順

background には8プロパティをまとめて書けます。順番はほぼ自由ですが、守る決まりが3つあります。

.box {
  background: #eee url("img/photo.jpg") center / cover no-repeat;
  /*          色    画像                 位置  / サイズ 繰り返し */
}

スラッシュを忘れると宣言ごと無効になる

実際に2通りを書き、適用された値を読み取りました。

.o  { background: url(a.png) center / cover no-repeat #eee; }
.x  { background: url(a.png) center cover no-repeat #eee; }  /* スラッシュなし */

スラッシュがないと、background の宣言全体が無効になり、画像も色もすべて初期値に戻ります。 「背景がまったく出ない」ときは、まずここを確認します。開発者ツールでは、無効な宣言に取り消し線と警告マークが付きます。

一括指定は書かなかった値を初期値に戻す

/* 直す前：色が消える */
.a { background-color: #eee; background: url(a.png) no-repeat; }

/* 直した後：一括指定を先に、個別指定を後に */
.b { background: url(a.png) no-repeat; background-color: #eee; }

一括指定は「書いていないプロパティを初期値で上書きする」動きをします。個別指定と混ぜるときは、一括指定を先に書きます。 メディアクエリや :hover で画像だけ差し替えたい場合は、background ではなく background-image だけを書くと、ほかの指定がそのまま残ります。

全部入りの例

.full {
  background: #eee url(a.png) right 10px top 20px / 50% auto repeat-x fixed content-box padding-box;
}

適用された値：

padding-box を1つだけ書いた場合は、origin と clip の両方が padding-box になりました。

コピペで使える背景コード集

全面背景（画面いっぱいのメインビジュアル）

.hero {
  min-height: 100svh;  /* スマホのアドレスバーを除いた画面の高さ */
  background: #333 url("img/hero.jpg") center / cover no-repeat;
  color: #fff;
  display: grid;
  place-items: center; /* 中の文字を上下左右中央に */
}

600pxの高さの画面で min-height: 100svh の要素は600pxになりました。#333 は画像が読み込まれるまでの色です。白い文字を載せる場合、暗めの背景色を入れておくと、画像が出る前でも文字が読めます。

中央に1枚だけ置く（繰り返しなし）

.empty {
  min-height: 240px;
  background: url("img/empty.svg") center no-repeat;
  background-size: 120px auto; /* 幅120px、高さは自動 */
}

画像を切らずに全体を見せる

.logo-area {
  aspect-ratio: 16 / 9;
  background: #fff url("img/logo.png") center / contain no-repeat;
}

画像の上に半透明の色を重ねる（オーバーレイ）

.overlay {
  background:
    linear-gradient(rgb(0 0 0 / .5), rgb(0 0 0 / .5)),
    url("img/hero.jpg") center / cover no-repeat;
  color: #fff;
}

同じ色から同じ色へのグラデーションを「半透明の1枚の膜」として使う方法です。赤い画像（rgb(255, 0, 0)）に重ねたところ、中央の画素は rgb(127, 0, 0) になり、黒50%が重なっていることを確認できました。余分な要素や疑似要素を足さずに、文字を読みやすくできます。

複数背景（重ね順は先に書いたものが上）

.stack {
  background:
    url("img/badge.png") right 12px top 12px / 48px no-repeat,  /* いちばん上 */
    linear-gradient(transparent 60%, rgb(0 0 0 / .6)),          /* 中間：下側を暗く */
    url("img/photo.jpg") center / cover no-repeat #222;         /* いちばん下。色はここだけ */
}

カンマで区切ると何枚でも重ねられます。先に書いたものが手前、最後に書いたものが奥です。背景色はさらにその奥に描かれます。

色を最後以外のレイヤーに書くとどうなるかも試しました。

.x { background: url(a.png) #333, url(b.png); }  /* 色が1枚目にある */

結果は background-image: none、background-color: rgba(0, 0, 0, 0) で、宣言全体が無効になりました。色は必ず最後のレイヤーに書きます。

個別プロパティで書く場合、値の数が画像の数より少ないと、足りない分は先頭から繰り返して補われます。

.y {
  background-image: url(a.png), url(b.png), url(c.png);
  background-repeat: no-repeat, repeat-x;  /* 2つしか書いていない */
}

適用された background-repeat は no-repeat, repeat-x, no-repeat でした（3枚目は1つ目の値に戻る）。

グラデーション背景

グラデーションは background-image の値として扱われるので、位置・サイズ・繰り返しもそのまま使えます。

.grad    { background: linear-gradient(135deg, #06c, #0cf); }
.spot    { background: radial-gradient(circle at top right, #fff, #cde); }
.stripes { background: repeating-linear-gradient(45deg, #eee 0 10px, #fff 10px 20px); }

background-color: linear-gradient(...) とは書けません（グラデーションは色ではなく画像の扱い）。background か background-image に書きます。

画面幅で背景画像を切り替える

.hero {
  min-height: 60svh;
  background: #333 url("img/hero-wide.jpg") center / cover no-repeat;
}

@media (max-width: 600px) {
  .hero {
    background-image: url("img/hero-tall.jpg"); /* 画像だけ差し替える */
    background-position: center top;
  }
}

メディアクエリの中では background ではなく background-image を使っています。一括指定で書くと、cover や no-repeat が初期値に戻り、スマホだけ画像がタイル状に並ぶ、という結果になるためです。横長の写真を縦長の画面に cover で敷くと左右が大きく切れるので、縦長用の画像を別に用意すると見せたい部分を保てます。

カードの上半分に写真を敷く

<article class="card">
  <div class="card-photo" role="img" aria-label="倉庫の棚に並んだ備品"></div>
  <h3>備品の在庫一覧</h3>
</article>

.card { width: 300px; border: 1px solid #ddd; border-radius: 12px; overflow: hidden; }
.card-photo {
  aspect-ratio: 3 / 2;   /* 幅に合わせて高さが決まる（300px幅なら200px） */
  background: #eee url("img/shelf.jpg") center / cover no-repeat;
}

背景画像には代替テキストを付けられないので、内容を伝えたい画像を背景で表示する場合は role="img" と aria-label を添えます。

背景が描かれる順番

色・画像・枠線は、奥から次の順で重なります。

背景色は必ず画像の奥に描かれるので、透過PNGやSVGの透明な部分からは背景色が見えます。 また、background-clip の初期値は border-box のため、背景は枠線の下まで広がっています。点線や半透明の枠線にすると、線のすき間から背景が見えるのはこのためです。

高解像度の画面向けに画像を出し分ける

.hero {
  background-image: url("img/hero.jpg");  /* 対応していない環境向け */
  background-image: image-set(
    url("img/hero.avif") type("image/avif"),
    url("img/hero.jpg") type("image/jpeg")
  );
}

Chromium 141 では CSS.supports('background-image', 'image-set("a.png" 1x)') が true でした。type() による形式の出し分けの実表示は未実行です。

画像が表示されない・切れる・ずれるときのチェックリスト

表示されない

高さ0の例を実際に測りました。

<div style="background: url(photo.svg)"></div>                    <!-- offsetHeight: 0 -->
<div style="background: url(photo.svg); min-height: 200px"></div> <!-- offsetHeight: 200 -->

背景画像は要素を押し広げないので、中身のない要素には高さの指定が必要です。画像の縦横比に合わせたいなら aspect-ratio: 2 / 1; のように書くと、幅に応じて高さが決まります。

切れる

ずれる

iOSでbackground-attachment: fixedが効かないときの回避コード

background-attachment: fixed は、背景を画面（ビューポート）に固定し、スクロールしても動かないようにする値です。

Chromium 141 では、fixed を指定した高さ400pxの要素を100px・200px・300pxとスクロールさせても、画像の上端の帯は常に画面の同じ位置（上から0〜59px）に描かれ、要素がその位置に重なったときだけ見えました。画面に固定されていることが確認できます。

一方、iOS の Safari では fixed が期待どおりに働かず、画像が大きく引き伸ばされたり、固定されずに流れたりすることが広く知られています（iOS実機での確認は未実行です）。MDN の background-attachment のページも開きましたが、Baseline の欄に「一部の機能は対応状況に差がある」という注記がありました。

回避方法は2つあります。

方法1：疑似要素を position: fixed で敷く（固定の見た目を保つ）

.parallax {
  position: relative;
  min-height: 400px;
  clip-path: inset(0);  /* この要素の範囲だけを「窓」として切り抜く */
}
.parallax::before {
  content: "";
  position: fixed;      /* 画面に固定 */
  inset: 0;
  z-index: -1;
  background: url("img/bg.jpg") center / cover no-repeat;
}

背景を「画面に固定した疑似要素」として置き、親の clip-path: inset(0) で親の範囲だけ見えるように切り抜きます。Chromium 141 で同じ測定をしたところ、background-attachment: fixed と同じく、画像は画面の同じ位置に固定されたままでした。background-attachment を使わないので、iOS でも同じ考え方で動く方法として知られています（iOS実機は未実行）。

方法2：タッチ端末では固定をやめる（シンプルに切り替える）

.parallax {
  background: url("img/bg.jpg") center / cover no-repeat fixed;
}

/* iOS の Safari だけに当たる条件 */
@supports (-webkit-touch-callout: none) {
  .parallax { background-attachment: scroll; }
}

-webkit-touch-callout は iOS の Safari が持つ独自プロパティで、Chromium 141（パソコン向け）では CSS.supports('-webkit-touch-callout', 'none') が false を返しました。そのため、このブロックはパソコンのブラウザには当たりません。固定の演出が必須でなければ、こちらのほうが短く、スクロールも軽くなります。

よくある質問

Q. background-size: cover と contain はどう使い分けますか？ A. 余白を出したくないなら cover、画像を切りたくないなら contain です。写真の全面背景は cover、ロゴや図のように全体が見えることが大切な画像は contain が合います。cover を使うときは background-position で残したい位置を指定します。

Q. 背景画像と img 要素はどちらを使えばよいですか？ A. 内容として意味のある画像（記事の写真、商品の画像など）は img 要素、飾りや雰囲気づくりの画像は背景、が目安です。img は代替テキストを付けられ、遅延読み込みも属性1つで指定できます。img でも object-fit: cover を使えば、背景の cover と同じ見た目にできます。

Q. 背景画像だけを半透明にできますか？ A. opacity は中の文字ごと透けるので、背景だけを薄くしたいときは、オーバーレイの節で紹介したように半透明のグラデーションを重ねます。白を重ねれば薄く、黒を重ねれば暗くなります。

Q. background と background-image のどちらで書くのがよいですか？ A. 最初の指定は一括の background で短く書き、あとから一部だけ変えるとき（ホバー、メディアクエリ）は background-image などの個別プロパティを使うと、ほかの値が初期値に戻るのを防げます。

まとめ

• background 系は8プロパティ。初期値は「透明・画像なし・繰り返す・左上・元の大きさ・scroll・padding-box・border-box」
• cover は箱を覆って切る、contain は全体を収めて余白が出る。％指定は箱の大きさに対する割合
• 中央寄せは background-position: center。％は「箱の点と画像の点を重ねる」計算なので、幅が同じだと動かない
• 一括指定は「位置 / サイズ」をスラッシュで区切る。忘れると宣言全体が無効になる
• 一括指定は書かなかった値を初期値に戻す。個別指定はその後ろに書く
• 複数背景は先に書いたものが手前、色は最後のレイヤーだけ。オーバーレイは半透明のグラデーションを重ねる
• 表示されないときは高さ0・パス・スラッシュを確認。iOS の fixed は疑似要素か @supports で回避する

株式会社RJCでは、CSSの背景指定やレイアウトの仕組みを仲間と学び合っています。こうした知識を共有しながら、日々技術を磨いています。

株式会社RJC ― SI事業・SES事業・AI駆動開発。RJCは一緒に成長を楽しめる会社です。