2025/05/19

【CSS入門】Webページに背景画像を設置する方法 | 基本から応用まで徹底解説

Webサイトのデザインにおいて、背景画像はサイトの印象を大きく左右する重要な要素です。CSSを使えば、簡単にWebページの背景に画像を設置することができます。この記事では、background-imageプロパティの基本的な使い方から、画像の繰り返し、サイズ調整、位置調整、スクロール固定といった応用方法まで、初心者の方にも分かりやすく解説します。

1. background-imageプロパティで背景画像を設置する

最も基本的な方法は、CSSのbackground-imageプロパティを使用することです。背景に設定したい要素（body全体や特定のdivなど）に対して、画像のURLを指定します。

基本的なコード

CSS
body {
  background-image: url("path/to/your/image.jpg");
}

bodyセレクタは、Webページ全体の背景を指定する場合に使用します。
url()の中に、背景として表示したい画像のパスを指定します。
パスは相対パスでも絶対パスでも構いません。

この設定だけでは、画像が要素全体を覆わず、繰り返して表示される場合があります。次のセクションで、その制御方法を見ていきましょう。

2. 背景画像の繰り返しを制御する (background-repeat)

background-repeatプロパティを使うと、背景画像を繰り返して表示するかどうか、またはどのように繰り返すかを制御できます。

background-repeat の値

repeat: デフォルト。画像を水平方向・垂直方向の両方に繰り返します。
no-repeat: 画像を繰り返さずに1つだけ表示します。
repeat-x: 画像を水平方向（横）にのみ繰り返します。
repeat-y: 画像を垂直方向（縦）にのみ繰り返します。

コード例

CSS
body {
  background-image: url("path/to/your/image.jpg");
  background-repeat: no-repeat; /* 繰り返しなし */
}

3. 背景画像のサイズを調整する (background-size)

背景画像を要素のサイズに合わせて調整したい場合は、background-sizeプロパティを使用します。このプロパティは、要素に対して画像がどのように表示されるかを強力に制御できます。

background-size の値

auto: デフォルト。画像の元のサイズで表示します。
cover: 要素の領域を完全に覆うように画像を拡大・縮小します。画像のアスペクト比は維持されるため、画像の一部が切り取られることがあります。フルスクリーン背景によく使われます。
contain: 画像が要素の領域内に完全に収まるように拡大・縮小します。画像のアスペクト比は維持されます。要素内に画像をすべて表示したい場合に便利です。
length: pxや%などで具体的なサイズを指定します（例: 200px 100px, 50% auto）。

コード例

CSS
body {
  background-image: url("path/to/your/image.jpg");
  background-repeat: no-repeat;
  background-size: cover; /* 要素全体を覆うように拡大・縮小 */
}

CSS
body {
  background-image: url("path/to/your/image.jpg");
  background-repeat: no-repeat;
  background-size: contain; /* 要素内に収まるように拡大・縮小 */
}

4. 背景画像の位置を調整する (background-position)

背景画像の表示位置は、background-positionプロパティで指定します。デフォルトは左上(0% 0% または left top)です。

background-position の値

キーワード（top, bottom, left, right, center）や、%、pxなどの単位で指定します。通常は水平方向と垂直方向の2つの値を指定します。

center center: 中央に配置
top right: 右上に配置
50% 50%: 中央に配置 (center center と同じ)
10px 20px: 左上から右に10px、下に20pxの位置

コード例

CSS
body {
  background-image: url("path/to/your/image.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center; /* 中央に配置 */
}

5. 背景画像をスクロールで固定する (background-attachment)

background-attachmentプロパティを使うと、要素の内容がスクロールされたときに、背景画像を一緒にスクロールさせるか、固定したままにするかを設定できます。

background-attachment の値

scroll: デフォルト。要素の内容と一緒に背景画像もスクロールします。
fixed: 背景画像をビューポート（表示領域）に固定します。要素の内容がスクロールされても、背景画像はその位置に留まります。
local: 要素自身のスクロール可能な内容に合わせて背景画像がスクロールします。

コード例 (パララックス効果などに)

CSS
body {
  background-image: url("path/to/your/image.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  background-attachment: fixed; /* 背景画像を固定 */
}

6. 複数の背景画像を重ねて表示する

CSS3以降では、background-imageプロパティにカンマ区切りで複数の画像URLを指定することで、複数の背景画像を重ねて表示することが可能です。

コード例

CSS
div {
  background-image: url("path/to/image1.png"), url("path/to/image2.jpg");
  background-repeat: no-repeat, repeat; /* それぞれの画像に設定 */
  background-position: center, top left; /* それぞれの画像に設定 */
  /* background-sizeなどもカンマ区切りで指定可能 */
  width: 500px;
  height: 300px;
  border: 1px solid #ccc;
}

先に指定した画像が前面に、後に指定した画像が背面に表示されます。
background-repeat, background-position, background-sizeなどの他の背景関連プロパティも、カンマ区切りでそれぞれの画像に対応する値を指定できます。

7. ショートハンドプロパティ (background)

これまで紹介した背景関連のプロパティ（background-image, background-repeat, background-position, background-size, background-attachment, background-color）は、backgroundというショートハンドプロパティでまとめて指定することができます。

background プロパティの記述順 (一般的な順序)

background: [background-color] [background-image] [background-repeat] [background-attachment] [background-position] / [background-size];

スラッシュ (/) の後にbackground-sizeを指定します。
指定しないプロパティは初期値が適用されます。

コード例

CSS
body {
  /* color image repeat attachment position / size */
  background: #f0f0f0 url("path/to/your/image.jpg") no-repeat center center / cover fixed;
}

ショートハンドはコードを簡潔に記述できますが、可読性を考慮して個別に記述する場合もあります。

8. 背景画像を使用する際の注意点

ファイルパスの確認: 画像ファイルへのパスが正しいか再度確認しましょう。ブラウザの開発者ツールなどでエラーが出ていないか確認する癖をつけましょう。
画像の最適化: 高解像度すぎる大きな画像はページの表示速度を低下させます。適切なサイズにリサイズし、圧縮ツールなどでファイルサイズを小さく最適化してから使用しましょう。
アクセシビリティ: 背景画像の上にテキストなどを配置する場合、テキストと背景のコントラストが十分か確認しましょう。読みにくい場合は、背景画像の上に半透明の色を重ねるなどの工夫が必要です。
CSSの適用範囲: どの要素に背景画像を適用したいのか（body全体か、特定のdivかなど）を明確にしてセレクタを指定しましょう。

まとめ

CSSのbackground-imageプロパティを使えば、Webページに手軽に背景画像を設置できます。さらに、background-repeat, background-size, background-position, background-attachmentといったプロパティを組み合わせることで、背景画像の表示方法を細かく制御し、様々なデザインを実現できます。

この記事で解説した基本的なプロパティの使い方をマスターして、あなたのWebサイトをより魅力的にデザインしてみましょう！画像の最適化やアクセシビリティにも配慮することを忘れずに。

[参考]
・background-image – CSS: カスケーディングスタイルシート | MDN