【CSS】background の使い方｜背景の色・画像・位置・サイズ・繰り返しを設定する

要素の背景に色を敷いたり、画像を置いたり、位置や大きさを調整したり。こうした背景まわりの見た目は、すべて CSS の background 系プロパティでコントロールします。ただ、値の種類が多く「なんとなく background: ... と書いているけれど、それぞれが何を指定しているのか自信がない」という方も多いはずです。この記事では background-color から background-size の cover / contain、そしてすべてをまとめて書けるショートハンドまで、初心者〜中級者に向けて実際に動くコードで整理します。

背景は複数のプロパティの組み合わせでできている

「背景」と一口に言っても、実際には「どんな色か」「どんな画像か」「その画像をどこに、どのくらいの大きさで、繰り返すのか」といった複数の指定が重なって1つの見た目を作っています。CSS ではこれらを個別のプロパティに分けて用意しており、必要なものだけを組み合わせて使います。

まずは全体像として、よく使う背景プロパティと役割を押さえておきましょう。

background-color で背景色を塗る

もっとも基本的なのが background-color です。値にはカラーネーム（red など）、16進数（#4f8cff）、rgb() / rgba()、hsl() といった、CSS で色を表せる値がそのまま使えます。透明度を含めたいときは rgba() や、末尾にアルファ値を足した16進数（#4f8cff80）を使います。

.box {
  /* 単色で塗る */
  background-color: #4f8cff;
}

.overlay {
  /* 半透明の黒（下の要素が透ける） */
  background-color: rgba(0, 0, 0, 0.5);
}

初期値は transparent（透明）です。何も指定しなければ背景は透明のままで、親要素の背景が透けて見えます。

background-image で画像やグラデーションを置く

background-image は背景に画像を敷くプロパティです。画像ファイルを指定するときは url() でパスを渡します。パスは CSS ファイルからの相対パス、またはサイトルートからの絶対パスで指定します。

.hero {
  /* CSS ファイルからの相対パスで画像を指定 */
  background-image: url("images/hero.jpg");
}

url() のほかに、linear-gradient() や radial-gradient() といったグラデーションも background-image の値として扱えます。これらは画像ファイルを用意しなくても背景に模様やグラデーションを描けるため、装飾用途でよく使われます。

カンマ区切りで複数の背景を重ねる

background-image はカンマで区切って複数指定できます。このとき先に書いたものが手前（上）に重なるのがポイントです。次の例では、半透明の暗いグラデーションを写真の上に重ねて、文字を読みやすくしています。

.hero {
  background-image:
    /* 1つ目が手前：黒い半透明の膜 */
    linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),
    /* 2つ目が奥：写真 */
    url("images/hero.jpg");
}

background-repeat で繰り返しを制御する

背景画像は初期状態では、要素を埋めるようにタイル状に繰り返されます。これは小さなパターン画像を敷き詰めたいときには便利ですが、写真を1枚だけ表示したいときは繰り返さないよう指定する必要があります。それを担うのが background-repeat です。

写真1枚を表示するなら no-repeat、小さな模様を敷き詰めるなら初期値の repeat、という使い分けが基本になります。

background-position で表示位置を決める

background-position は背景画像を要素内のどこに置くかを指定します。値は「水平方向 垂直方向」の順に、キーワード（left / center / right、top / center / bottom）、パーセント、ピクセルなどの長さで指定できます。値を1つだけ書いた場合、もう一方は center として扱われます。

実際に left top / center / right bottom で同じ画像がどう動くかを比べてみます。CSS の値を書き換えると、右のプレビューにその場で反映されます。

<div class="grid">
  <div class="pos p1">left top</div>
  <div class="pos p2">center</div>
  <div class="pos p3">right bottom</div>
</div>

.grid {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.pos {
  width: 160px;
  height: 120px;
  border: 1px solid #ccc;
  color: #333;
  font-size: 13px;
  padding: 6px;
  /* 小さな円をひとつだけ配置（位置の違いが分かる） */
  background-image: radial-gradient(circle, #ff6b6b 0 24px, transparent 25px);
  background-repeat: no-repeat;
  background-color: #f2f4f8;
}

/* 左上に配置 */
.p1 { background-position: left top; }

/* 中央に配置 */
.p2 { background-position: center; }

/* 右下に配置 */
.p3 { background-position: right bottom; }

background-size で大きさを合わせる（cover と contain）

background-size は背景画像の大きさを指定します。200px 120px のように具体的な数値でも指定できますが、実務でよく使うのは cover と contain の2つのキーワードです。どちらも画像の縦横比は保ったままですが、狙いが逆です。

言葉だけだと分かりにくいので、同じ縦長の画像を cover と contain でそれぞれ表示して比べてみます。cover は隙間なく埋まる代わりに上下が切れ、contain は全体が見える代わりに左右に余白ができるのが分かります。

<div class="wrap">
  <div class="box cover">cover</div>
  <div class="box contain">contain</div>
</div>

.wrap {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.box {
  width: 180px;
  height: 120px;
  border: 1px solid #ccc;
  color: #fff;
  font-weight: bold;
  display: flex;
  align-items: flex-end;
  padding: 8px;
  /* 縦長のサンプル画像（data URI・外部ファイル不要） */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='150'%3E%3Crect width='100' height='150' fill='%234f8cff'/%3E%3Ccircle cx='50' cy='75' r='35' fill='%23ffd23f'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}

/* 領域全体を覆う（縦横比を保ったまま拡大、はみ出しは切れる） */
.cover {
  background-size: cover;
}

/* 画像全体が収まる（縦横比を保ったまま縮小、余白ができる） */
.contain {
  background-size: contain;
}

写真を敷いたヒーローエリアやカードのサムネイルには cover、ロゴや図版を切らずに全部見せたいときは contain、と覚えておくと迷いにくくなります。

background-attachment でスクロール時の挙動を変える

background-attachment は、ページをスクロールしたときに背景画像を一緒に動かすか、その場に固定するかを決めます。fixed にするとコンテンツだけがスクロールし、背景が貼り付いたように見える「パララックス風」の演出になります。

なお fixed はスマートフォンでは意図通りに動かないブラウザがある点に注意してください。モバイルで確実に固定演出を出したい場合は、別要素を position: fixed で背景として敷くなど、別の方法を検討します。

background ショートハンドでまとめて書く

ここまでの個別プロパティは、background 一つにまとめて書けます。値の順番は基本的に自由ですが、background-size だけは background-position の直後にスラッシュ（/）で区切って書く、というルールがあります。位置 / サイズ という組み合わせだけは順番が固定されていると覚えてください。

/* 個別に書いた場合 */
.hero {
  background-color: #2b62d8;
  background-image: url("images/hero.jpg");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

/* ショートハンドでまとめた場合（同じ意味） */
.hero {
  background: #2b62d8 url("images/hero.jpg") center / cover no-repeat;
}

実際にショートハンドだけで背景色・画像（グラデーション）・位置・サイズ・繰り返しを指定した例です。CSS を編集して、値の順番や / の位置を試してみてください。

<div class="card">
  <p>ショートハンドでまとめて指定</p>
</div>

.card {
  width: 260px;
  height: 140px;
  border-radius: 8px;
  color: #fff;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  /* background: color image position / size repeat の順でまとめて指定 */
  background:
    #2b62d8
    radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.35) 0 18px, transparent 19px)
    center / 120px no-repeat;
}

ショートハンドを使うときの注意点として、background に書き忘れたプロパティはすべて初期値にリセットされることを覚えておきましょう。たとえば別の場所で background-color を指定していても、あとから background: url(...) とだけ書くと、色の指定は消えて透明に戻ってしまいます。

背景画像が表示されないときに確認すること

background-image を指定したのに背景が真っ白のまま、というのは背景まわりで最も多いつまずきです。原因はいくつかのパターンに分かれます。

パスが間違っている

url() の中のパスは、HTML ファイルからの相対パスではなくCSS ファイルからの相対パスで解決されます。CSS を css/ フォルダに置き、画像を images/ フォルダに置いているなら、url("../images/hero.jpg") のように一階層上がる必要があります。まずはブラウザの開発者ツールのネットワークタブを開き、画像の読み込みが404になっていないかを確認するのが確実です。

要素に高さがない

背景画像は要素の領域の中にしか描画されません。中身が空の div は高さが 0 になるため、背景を指定しても表示する場所がなく、何も見えません。min-height や height を与えて、要素に描画領域を確保してください。

ほかの指定に上書きされている

前述のとおり、あとから書いた background ショートハンドが、先に指定した background-image をリセットしてしまうケースがあります。開発者ツールで対象要素を選び、background-image の値が意図したものになっているか、打ち消し線が引かれていないかを確認しましょう。

画像のサイズや位置が思った通りにならないとき

画像は出ているのに「大きすぎる」「切れてしまう」「隅に寄ってしまう」という場合は、background-size と background-position、そして background-repeat の組み合わせを見直します。

写真を1枚だけきれいに敷きたいのに小さくタイル状に並んでしまうなら、background-repeat: no-repeat が抜けています。逆に大きく引き伸ばしたいのに本来のサイズで表示されるなら、background-size が初期値の auto のままです。cover を指定すれば要素いっぱいに広がります。さらに cover で写真の見せたい部分が切れてしまうときは、background-position で中心をずらすと、切り取られる位置を調整できます。この3つはセットで考えると、たいていの「思った通りにならない」は解消できます。

まとめ

背景の見た目は、色・画像・繰り返し・位置・サイズ・スクロール挙動という複数のプロパティの組み合わせでできています。色だけなら background-color、画像を敷くなら background-image、そして写真を1枚だけ表示するなら background-repeat: no-repeat・background-position・background-size: cover をセットで指定する、というのが基本の型です。

複数のプロパティに慣れてきたら background ショートハンドでまとめて書くと記述がすっきりします。ただし書き忘れたプロパティが初期値に戻る点、位置 / サイズ はスラッシュ区切りで順番が固定される点だけ注意してください。背景が出ないときはパス・要素の高さ・上書きの3点を、サイズや位置が合わないときは repeat・size・position の3点を確認すれば、多くのトラブルは解決できます。

参考ページ

• background – CSS: カスケーディングスタイルシート | MDN
• background-image – CSS: カスケーディングスタイルシート | MDN
• background-size – CSS: カスケーディングスタイルシート | MDN
• background-position – CSS: カスケーディングスタイルシート | MDN