目次
背景画像とは
背景画像とは、HTML要素の背後に表示される画像のことです。
写真や模様、装飾用のパターンなどを配置することで、ページ全体の雰囲気を大きく変えることができます。
CSSでは background-image を中心としたプロパティを使って制御します。
背景画像を表示する基本
まずは最も基本的な指定方法です。
.box {
background-image: url("bg.jpg");
}これだけで、指定した要素の背景に画像が表示されます。
繰り返し表示の仕組み
背景画像は、デフォルトでは 繰り返し表示 されます。
.box {
background-image: url("pattern.png");
}小さな模様画像などは、自然に全面へ敷き詰められます。
繰り返し方法を指定する
繰り返し方は background-repeat で制御できます。
.box {
background-image: url("pattern.png");
background-repeat: repeat;
}指定できる主な値は以下です。
- repeat：縦横ともに繰り返し
- repeat-x：横方向のみ繰り返し
- repeat-y：縦方向のみ繰り返し
- no-repeat：繰り返さない
.box {
background-repeat: no-repeat;
}背景画像の位置を指定する
画像の表示位置は background-position で調整します。
.box {
background-position: center center;
}よく使われる指定例です。
- left top
- center center
- right bottom
数値やパーセンテージ指定も可能です。
background-position: 50% 30%;背景画像を全面に表示する方法
画面いっぱいに背景画像を表示したい場合は、以下の指定が基本です。
.hero {
background-image: url("main.jpg");
background-size: cover;
background-position: center;
}- cover：要素全体を覆うように拡大縮小
- 余白が出にくく、メインビジュアル向き
縦横比を保って収める方法
画像全体を必ず表示したい場合はこちらです。
.hero {
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}- contain：画像全体が収まる
- 余白が出る場合がある
用途に応じて cover と使い分けます。
body全体に背景画像を表示する
ページ全体に背景を敷く場合の例です。
body {
background-image: url("bg.jpg");
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}この方法は、ランディングページやシンプルな構成のサイトでよく使われます。
背景画像と文字を重ねる場合の注意点
背景画像の上に文字を載せる場合、可読性 に注意が必要です。
.overlay {
background-color: rgba(0, 0, 0, 0.4);
}半透明のレイヤーを重ねることで、文字が読みやすくなります。
複数の背景画像を使う方法
CSSでは、背景画像を重ねることも可能です。
.box {
background-image:
linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)),
url("bg.jpg");
background-size: cover;
}グラデーションと画像を組み合わせた表現もよく使われます。
レスポンシブ対応の考え方
背景画像は画面サイズによって見え方が変わります。
- 被写体が切れないか
- 文字と重なっていないか
- スマホで重くなっていないか
必要に応じてメディアクエリで切り替えます。
@media screen and (max-width: 768px) {
.hero {
background-image: url("main_sp.jpg");
}
}よくある失敗例
背景画像でよくあるミスです。
- 要素に高さがない
- パス指定ミスで画像が表示されない
- cover指定で重要な部分が切れる
- ファイルサイズが大きすぎる
背景を表示する要素には、必ず高さや内容を持たせましょう。
実務でよく使われる場面
背景画像は、以下のような場面で頻繁に使われます。
- トップページのメインビジュアル
- セクション区切りの装飾
- パターン背景
- CTAエリア
HP Build Studioの制作現場でも、背景画像は最も基本的で重要な表現のひとつです。
まとめ
CSSで背景画像を扱うポイントは次の通りです。
- 基本は background-image
- 繰り返しは background-repeat
- 全面表示は cover を使う
- 文字の可読性を必ず考慮する
- レスポンシブ対応を忘れない
まずは小さなセクションから試し、用途に応じて調整していきましょう。