Webデザインで背景に画像を入れる場面はとても多くあります。ページ全体の印象を左右する重要な要素であり、見やすさや雰囲気を大きく変えることができます。この記事では、CSS 背景画像を設定する方法の基本から、background-imageプロパティの書き方、サイズ調整・位置指定の方法までを初心者向けにわかりやすく解説します。
CSSで背景画像を設定する基本を理解しよう
背景画像はbackground-imageで指定します。CSSでは、background-imageプロパティを使うことで、要素の背景に画像を表示できます。
body {
background-image: url("images/background.jpg");
}
背景画像は装飾目的で使用され、ページ全体の雰囲気を演出するのに最適です。
背景色との違い
- background-color・単色で背景を塗る
- background-image・画像を背景として表示
両方を組み合わせることで、画像が読み込まれないときにも背景色を表示できるようになります。
background-imageの基本構文と指定方法
background-imageプロパティの詳細仕様は、background-imageプロパティ徹底解説（MDN公式ドキュメント）を参考にすると理解が深まります。
selector {
background-image: url("画像パス");
}
例・相対パスと絶対パス
/* 相対パス */
div {
background-image: url("img/pattern.png");
}
/* 絶対パス */
div {
background-image: url("https://example.com/bg.jpg");
}
背景画像が表示されないときのチェックポイント
- ファイルパスが間違っていないか
- 画像が正しくアップロードされているか
- ブラウザキャッシュが残っていないか・更新して再確認
背景画像の繰り返し設定・background-repeat
CSS 背景画像のデフォルト設定は繰り返し（repeat）です。画像を並べてタイル状に敷き詰めるように表示します。
body {
background-repeat: repeat;
}
よく使う指定
background-repeat: no-repeat; /* 繰り返しなし */
background-repeat: repeat-x; /* 横方向だけ */
background-repeat: repeat-y; /* 縦方向だけ */
タイルパターンなどを背景に使いたい場合には、repeatを活かすと便利です。
背景画像のサイズ調整・background-size
背景画像を要素のサイズに合わせたい場合は、background-sizeプロパティを使用します。主な指定方法は以下の通りです。
background-size: auto; /* 元の画像サイズを維持 */
background-size: cover; /* 要素全体を覆うように拡大 */
background-size: contain; /* 要素全体に収まるように縮小 */
例・coverとcontainの違い
/* 画面いっぱいに背景を広げる（切れ目あり） */
body {
background-image: url("bg.jpg");
background-size: cover;
}
/* 全体を収める（余白ができる） */
div {
background-image: url("photo.png");
background-size: contain;
}
coverはレスポンシブデザインでよく使われ、どのデバイスでもきれいに背景を広げることができます。
%やpxでのサイズ指定も可能
background-size: 100% 100%; /* 横幅・高さを100%に */
background-size: 500px auto; /* 横幅を固定、高さは自動 */
画像が伸びる・切れる場合は、background-sizeを調整して最適化しましょう。
背景画像の位置調整・background-position
背景画像を配置する位置は、background-positionで指定します。構文は以下の通りです。
background-position: center center;
よく使う指定例
background-position: top left; /* 左上 */
background-position: top right; /* 右上 */
background-position: bottom center;/* 下中央 */
background-position: center center;/* 中央 */
数値指定も可能です。
background-position: 50% 50%; /* 中央 */
background-position: 10px 20px; /* 左から10px、上から20px */
スクロール時に背景を固定する
背景をスクロールしても動かさない場合は、background-attachment: fixed;を使います。
body {
background-image: url("bg.jpg");
background-attachment: fixed;
background-size: cover;
background-position: center;
}
これで、いわゆるパララックス風背景が実現できます。
複数の背景画像を重ねて表示する
CSSでは、複数の背景画像をカンマで区切って指定できます。
div {
background-image: url("pattern.png"), url("main.jpg");
background-position: top left, center;
background-repeat: repeat, no-repeat;
}
最初に書かれた画像が手前に、後に書かれたものが奥に表示されます。
グラデーションとの組み合わせ例
CSS 背景画像は、linear-gradient()と組み合わせて半透明の色を重ねることも可能です。
div {
background-image:
linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)),
url("hero.jpg");
background-size: cover;
background-position: center;
}
これにより、文字が読みやすいデザインに仕上がります。
実践サンプル・全面背景画像をレスポンシブに配置する
レスポンシブ対応の具体例は、CSSだけでできる背景画像＆レスポンシブ対応のページでも詳しく紹介されています。
body {
background-image: url("main-bg.jpg");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-attachment: fixed;
}
この設定で、画面全体に広がる背景画像を作成できます。文字や要素を重ねる場合は、コントラストや可読性に注意しましょう。
見やすくする工夫
- 背景に暗めのオーバーレイ・半透明の黒を重ねる
- 文字の色を白や黄色など明るく設定する
- 背景にぼかしを入れて主張を抑える
まとめ｜background-imageを使いこなしてデザインの幅を広げよう
- 背景画像は background-image で設定
- サイズ調整は background-size・特にcover・containで管理
- 配置は background-position で調整
- 繰り返し設定や複数背景を組み合わせることで表現力がアップ
CSS 背景画像を理解すれば、Webページのデザイン性を大きく向上できます。まずはcover＋centerを使った基本設定から試してみましょう。
