【CSS】レッスン3-6：背景画像を設定しよう
一つ前の章では画像のスタイルを変更する方法について学習しました。
今回は背景画像の設定方法について見ていきましょう。
Lesson１：HTML入門編
Lesson２：CSS入門編
Lesson３：CSS応用編
・Lesson3-1：ボックス配置の基礎を理解しよう
・Lesson3-2：ボックスサイズを変更しよう
・Lesson3-3：ボックスを自在に配置しよう
・Lesson3-4：画像を自在に配置しよう
・Lesson3-5：画像のスタイルを変更しよう
・Lesson3-6：背景画像を設定しよう ◁今回はココ
・Lesson3-7：リンクボタンを設置しよう
・Lesson3-8：リストとテーブルのスタイルを変更しよう
・Lesson3-9：CSS変数を理解しよう
・Lesson3-☆1：コピペして使える！カードレイアウト集
・Lesson3-☆2：HTML/CSSテンプレート６選
・Lesson3-☆3：CSSのリセット＆ノーマライズとは？
Webページのデザインをより魅力的にするためには、文字やレイアウトだけでなく、視覚的な要素も重要です。
その中でも「背景画像」は、ページ全体の雰囲気や印象を大きく左右する効果的なデザイン手法のひとつです。
このレッスンでは、CSSを使って背景画像を簡単に設定する方法を学び、サイズや位置を調整して思い通りのデザインを作成するテクニックを身につけましょう。
<<前のページ
HTML/CSSの記事一覧
次のページ>>
背景画像の基本｜background-imageで適用する方法
背景画像とはWebページの背景部分に配置される画像のことです。
通常、テキストやコンテンツの背後に表示され、ページ全体のデザインや雰囲気を引き立てる役割を果たします。
例えば風景の写真を背景にすることで、自然を感じさせるデザインにしたり、グラデーション画像を使うことで、シンプルながらもスタイリッシュな印象を与えることができます。
背景画像は単なる装飾だけでなく、Webサイトのブランドイメージやメッセージを視覚的に伝える重要な要素です。
背景画像はCSSの background-image プロパティを使用することで簡単に設定できます。
このプロパティを使うことで、任意の画像をWebページの背景として表示することが可能です。
背景画像を設定する基本構文は以下の通りです。
selector {
background-image: url('画像のパス');
}selector: CSSで指定する要素（例：body、divなど）。url('画像のパス'): 表示したい画像の場所を指定します。画像ファイルは、相対パスまたは絶対パスで指定できます。
bodyタグに対してbackground-imageプロパティを指定すれば、、ページ全体の背景に画像が表示されます。
背景画像のサイズ指定｜background-sizeの使い分け
背景画像を設定しただけでは、画像のサイズが意図した通りに表示されない場合があります。
画像が大きすぎたり、小さすぎたりして、デザインが崩れてしまうこともあります。
この問題を解決するために使用するのが、background-size プロパティです。
background-sizeプロパティの基本｜指定値（px・%）の理解
background-size プロパティは、背景画像の表示サイズを調整するためのプロパティです。
このプロパティを使うことで、画像を拡大・縮小したり、特定のサイズにフィットさせたりすることができます。
基本構文は以下の通りです。
selector {
background-image: url('画像のパス');
background-size: 値;
}selector: CSSのセレクタ（例:body,divなど）値: サイズを指定する値（例:100px 200px,50% 50%など）
値の部分には具体的な数値のほかに、cover や contain といった指定もできます。
coverとcontainの違い｜全画面表示／収まり優先の選び方
背景画像を設定するとき、background-sizeプロパティに cover や contain を指定できます。
これは「画像をどうやって要素の大きさに合わせるか」を決めるものです。
| 値 | 意味 |
|---|---|
| cover | 背画像を要素全体に「はみ出してでも」隙間が出ないように拡大縮小する。 ・要素全体が必ず背景で埋まる。 ・画像のアスペクト比（縦横比）は維持される。 ・画像の一部は切り取られる可能性がある。 |
| contain | 画像が要素全体に「全部収まるように」拡大縮小する。 ・画像は常に全部表示される。 ・アスペクト比は維持される。 ・要素の縦横比と画像の縦横比が違うと、余白（隙間）が出る。 |
例えば、coverを使用する場合は以下のように書きます。
selector {
background-image: url('画像のパス');
background-size: cover;
}
背景画像の位置指定｜background-positionの基礎
背景画像を設定した後、画像の表示位置を細かく調整したい場合にはbackground-position プロパティを使用します。
このプロパティを使うことで、背景画像を中央、上部、下部、左右など、自由に配置することができます。
background-positionプロパティの基本｜キーワード指定の方法
background-position プロパティの基本構文は以下の通りです。
selector {
background-image: url('画像のパス');
background-position: 値;
}selector: CSSのセレクタ（例:body,divなど）。値: 画像の配置場所（例:center,top,right,bottom,leftなど）。
background-positionの値は、以下の5つのキーワードが使用できます。
| 値 | 意味 |
|---|---|
| center | 中央に配置（デフォルト指定） |
| top | 上寄せ |
| bottom | 下寄せ |
| left | 左寄せ |
| right | 右寄せ |
background-sizeと組み合わせる配置のコツ
background-size で画像のサイズを調整した場合、background-position を組み合わせることでさらに細かなデザインが可能になります。
以下のCSSコードをbodyに読み込んでみましょう。
.box {
width: 400px;
height: 300px;
background-image: url('background.jpg');
background-size: 150px 150px;
background-position: center bottom; /* 中央下に配置 */
background-repeat: no-repeat; /* 繰り返しを防止 */
border: 1px solid #333;
}- 画像がボックスの中央下部に表示されます。
background-repeat: no-repeat;を指定することで、余分な画像の繰り返し表示を防ぎます。
位置指定のポイントまとめ
background-positionで背景画像の配置を細かくコントロールできる。- キーワード（
center,top,right, など）で直感的に配置が可能。 - ピクセルやパーセンテージ指定で、より精密な位置調整ができる。
background-sizeとの併用で、デザインの幅が広がる。
次は、背景色と背景画像を組み合わせる方法について学んでいきましょう。
背景色との併用｜background-colorと画像の重ね方
背景画像だけでなく、背景色（background-color） を併用することで、より視覚的に美しいデザインを作成することができます。
背景色は画像が表示されない場合のフォールバックとしても役立ち、ページのデザインの一貫性を保つために重要な役割を果たします。
background-color プロパティの基本｜適用範囲と指定方法
background-color プロパティは、要素の背景に単色の色を設定するためのCSSプロパティです。
基本構文は以下の通りです。
selector {
background-color: 色;
}selector: CSSのセレクタ（例:body,divなど）。色: 色名（例:red,blue）、16進数カラーコード（例:#ffcc00）、RGB値（例:rgb(255, 204, 0)）などで指定します。
画像×背景色の重ね方｜読みやすさを保つ工夫
background-image と background-color は同時に指定することができます。
この場合、背景色は背景画像の下に表示され、画像が透過している場合や表示されない場合に見えるようになります。
以下のHTMLコードをコピーし、適切な画像のパスを指定してブラウザ表示してみてください。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>背景色と背景画像の併用</title>
<style>
.background-box {
width: 300px;
height: 200px;
background-color: #f0f0f0; /* 背景色の指定 */
background-image: url('background.png'); /* 背景画像の指定 */
background-size: cover; /* 画像を全体にフィット */
background-position: center; /* 中央に配置 */
border: 2px solid #000;
}
</style>
</head>
<body>
<div class="background-box"></div>
</body>
</html>background-color: #f0f0f0;で薄いグレーの背景色を指定しています。background-image: url('background.png');で背景画像を設定。- もし画像が読み込まれない場合、この背景色が代わりに表示されます。
透過PNGとグラデーションの併用例｜linear-gradientの活用
PNG形式などの 透過画像 を使用する場合、背景色が透過部分に見えるため、デザインの自由度が高まります。
.transparent-box {
width: 300px;
height: 200px;
background-color: lightblue; /* 透過部分に表示される色 */
background-image: url('transparent.png'); /* 透過PNG画像 */
background-size: contain;
background-repeat: no-repeat;
background-position: center;
border: 1px solid #333;
}- 透過部分に
lightblueの背景色が表示されます。 - 透過画像を使うことで、デザインに奥行きや立体感を加えることができます。
また、背景色として、単色だけでなく グラデーション も使用可能です。
linear-gradient()プロパティ を使うことで、背景画像と組み合わせた美しいデザインが作れます。
linear-gradient()プロパティの基本構文は以下の通りです。
selector {
background-image:
linear-gradient(方向, 色1, 色2),
}以下のコードを使用し、ブラウザ表示してみましょう。
.gradient-box {
width: 300px;
height: 200px;
background-image:
linear-gradient(to bottom, rgba(255, 0, 0, 0.5), rgba(0, 0, 255, 0.5)),
url('background.jpg'); /* グラデーションと背景画像の重ね合わせ */
background-size: cover;
background-position: center;
border: 2px solid #000;
}linear-gradient()で赤から青への半透明グラデーションを作成。- その上に背景画像を重ねることで、デザインに深みを持たせることができます。
背景色と併用時のポイントまとめ
background-colorは、背景画像が表示されない場合のフォールバックとして便利。- 透過画像と組み合わせることで、背景色が透けて見えるデザインが可能。
- グラデーションを併用することで、さらにおしゃれな背景デザインが作れる。
このように背景色と背景画像を組み合わせることで、シンプルながらも洗練されたWebデザインを実現することができます。
まとめ｜背景画像使って親しみやすいWebページへ！
今回のレッスンでは、CSSを使った背景画像の設置方法について学びました。
背景画像はWebページの印象を大きく左右する重要な要素です。
今回学んだCSSプロパティを活用することで、シンプルなデザインから複雑なレイアウトまで自由自在に表現できるようになります。
ここまで学習を進めてきたあなたは、確実にスキルを向上させています！ぜひ、実際に自分のWebページで試してみて、さまざまなデザインに挑戦してみてください。
継続的な練習が、さらなる成長につながります。お疲れさまでした！
練習問題｜背景画像を設定してみよう
今回学習した内容を復習する練習問題に挑戦しましょう。
問題｜背景画像と背景色を組み合わせたデザインを作ろう！
以下の条件に従って、背景画像と背景色を組み合わせたオリジナルのデザインを作成してみましょう。
ファイル名はtraining3-6.htmlとしてください。
- 背景画像を用意すること。
- 背景画像はページ全体（
bodyタグ）に表示されるようにすること。 background-sizeを使って、画像がページ全体を覆うように表示すること。- 画像が中央に表示されるように、
background-positionを調整すること。 - 背景色として薄いグレー（
#eeeeee）を設定し、背景画像が表示されない場合のフォールバックとすること。 - 画像が繰り返されないように、
background-repeatを設定すること。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>総復習：背景デザインの課題</title>
<style>
body {
/* ここに必要なCSSプロパティを追加して完成させよう！ */
}
</style>
</head>
<body>
<h1>背景デザインの総復習！</h1>
<p>この記事で学んだ内容を活かして、素敵な背景デザインを作ってみよう！</p>
</body>
</html>この問題の解答例
模範解答は以下の通りです。
- 正解コード
-
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>総復習：背景デザインの課題</title> <style> /* 背景画像＋背景色（課題の必須条件をすべて満たす） */ body { background-image: url("images/training3-6-bg.jpg"); /* 任意の画像に差し替え可 */ background-size: cover; /* ページ全体を覆う */ background-position: center; /* 画像の中央を基準に配置 */ background-repeat: no-repeat; /* 画像を繰り返さない */ background-color: #eeeeee; /* 画像が表示されない場合のフォールバック */ } </style> </head> <body> <h1>背景デザインの総復習！</h1> <p>この記事で学んだ内容を活かして、素敵な背景デザインを作ってみよう！</p> </body> </html>
<<前のページ
HTML/CSSの記事一覧
次のページ>>
初めてのWebサイトを作ろう3-6
このサイトの Lesson1-1（HTML学習の入り口） か Lesson2-1（CSS学習の入り口）から順番に学習していくことで、HTMLとCSSの基本情報をまとめたあなたのWebサイトを作成できます。
サイトのタイトルは「自分で作る！HTML＆CSSの学習サイト」
この「初心者のためのプログラミングテキスト＆問題集」で紹介しているHTMLやCSSの情報・知識、覚えるべきタグなど簡潔にまとめ、後から辞書のように使えることを目標としています。
- Webサイト制作に挑戦する人はここをクリック！
-
自分だけのWebサイト制作にはベースとなる基本セットが必要になります。
まだ入手していない人はLesson1-1かLesson2-1のページ下部からダウンロードして下さい。
既に入手済みの場合はこのLessonのまとめノートと練習問題の解答を、MyWebsiteフォルダに追加しましょう。
練習問題の解答を保存しよう
練習問題3-6で作成した２つのファイルを学習フォルダの中に保存しましょう。
- training3-6.html ⇒ Lesson3フォルダに保存
- training3-6.css ⇒ Lesson3フォルダの中のstyleフォルダに保存
トップページからリンクで飛べるようになりますので確認しましょう。
今回のまとめノートを作成・保存しよう
下記のHTMLコードは、このLesson3-6で紹介した内容を端的にまとめてブラウザ表示するためのコードです。
これをコピーして「MyWebsite3-6.html」という名前で保存し、「lesson3（学習フォルダ）」の中に保存してください。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Lesson3-6</title> <link rel="stylesheet" href="style/styles-lesson3.css"> </head> <body> <h1>Lesson3-6：背景画像を設定しよう</h1> <div class="container"> <p> Webページのデザインでは、背景画像を適切に設定することで、ページ全体の雰囲気や印象を大きく変えることができます。 本記事では、<code>background-image</code> プロパティ を使って背景画像を設定し、 そのサイズや位置を調整する方法を学びます。 </p> <h2>このレッスンで学習した内容</h2> <h3><code>background-image</code> プロパティ（背景画像の基本設定）</h3> <ul> <li><code>background-image: url('画像のパス');</code> を指定することで、背景に画像を設定できる。</li> <li><code><body></code> に適用すると、ページ全体に背景画像が表示される。</li> </ul> <h3><code>background-size</code> プロパティ（背景画像のサイズ調整）</h3> <ul> <li><strong>cover</strong>：背景を要素全体に広げる（画像が一部切り取られる）。</li> <li><strong>contain</strong>：背景画像を要素内に収める（余白ができる場合がある）。</li> <li><strong>100px 200px</strong>：具体的なサイズを指定して縮小・拡大。</li> <li><strong>50% 50%</strong>：親要素に対する割合でサイズを指定。</li> </ul> <h3><code>background-position</code> プロパティ（背景画像の位置調整）</h3> <ul> <li><code>center</code>：中央に配置（デフォルト）。</li> <li><code>top</code> / <code>bottom</code> / <code>left</code> / <code>right</code>：上下左右に配置。</li> <li><code>center bottom</code> のように複数指定することで、細かく調整可能。</li> </ul> <h3><code>background-repeat</code> プロパティ（背景画像の繰り返し制御）</h3> <ul> <li><code>repeat</code>（デフォルト）：画像を繰り返して敷き詰める。</li> <li><code>no-repeat</code>：背景画像を1回のみ表示。</li> <li><code>repeat-x</code>：水平方向に繰り返し表示。</li> <li><code>repeat-y</code>：垂直方向に繰り返し表示。</li> </ul> <h3><code>background-color</code> プロパティ（背景色の設定）</h3> <ul> <li><code>background-color: #f0f0f0;</code> で単色の背景を設定可能。</li> <li>背景画像と併用することで、画像が表示されない場合のフォールバックにもなる。</li> </ul> <h3>グラデーションの適用（<code>linear-gradient</code>）</h3> <p> <code>background-image</code> にグラデーションを適用すると、背景画像と組み合わせたデザインが可能。 </p> <pre><code class="css"> background-image: linear-gradient(to bottom, rgba(255, 0, 0, 0.5), rgba(0, 0, 255, 0.5)); </code></pre> <h2>トピック・豆知識</h2> <h3>背景画像と背景色の併用</h3> <p><code>background-color</code> を設定すると、画像が読み込まれない場合に代替として表示される。</p> <h3>透過画像（PNGなど）を使うテクニック</h3> <p>背景色と透過画像を組み合わせることで、奥行きのあるデザインが可能。</p> <h3>レスポンシブデザインと背景画像</h3> <p><code>background-size: cover;</code> を使用すると、画面サイズに応じて背景が適切に拡大・縮小される。</p> <h2>まとめ</h2> <p>背景画像を適切に設定することで、Webページのデザインをより魅力的にすることができます。</p> <ul> <li><code>background-image</code> で画像を設定し、<code>background-size</code> や <code>background-position</code> で表示を調整。</li> <li><code>background-repeat</code> を活用して、画像の繰り返し表示を制御できる。</li> <li><code>background-color</code> を併用すると、背景画像が表示されない場合のフォールバックになる。</li> <li><code>linear-gradient</code> を使えば、グラデーションと背景画像を組み合わせたデザインも可能。</li> </ul> <p>これらのテクニックを活用し、背景画像を使った美しいデザインを作成してみましょう！</p> </div> <footer> <p>© 初心者のためのプログラミングテキスト＆問題集</p> </footer> </body> </html>これでLesson3-6の作業は完了です。
継続は力なり。次のLessonも、引き続き頑張ってください^^
背景画像の疑問解消｜FAQとよくあるトラブル
初心者がつまずきやすいポイントをFAQとしてまとめ、よくあるトラブルとその解決法をわかりやすく整理しました。
理解を深めたいときや、ふと疑問に感じたときに役立ててください。
FAQ｜背景画像に関するよくある質問
今回の記事に関する「よくある質問」とその解答について、以下の内容を参考にしてください。
- Q1. background-imageプロパティで設定した画像が画面サイズに合わない場合、どのプロパティを使えば良いですか？
-
画像の表示サイズを調整したい場合は、
background-sizeプロパティを使うのが一般的です。coverやcontainなどの値を設定することで、画面サイズに合わせた柔軟な調整が可能です。
- Q2. 背景画像を繰り返し表示したくない場合はどうすれば良いですか？
-
画像の繰り返しを防ぎたい場合は、
background-repeat: no-repeat;を指定します。これにより、画像が1回だけ表示され、同じ画像が自動的に並ぶことを防げます。
- Q3. 背景画像の表示位置を自由に変えるにはどんな方法がありますか？
-
background-positionプロパティを使うと、画像の表示位置を上下左右や中央などに細かく調整できます。たとえばcenter centerやright top、50% 50%などの指定が可能です。
よくあるトラブルと解決法｜背景画像編
今回の記事に関する「よくあるトラブル」とその原因、解決法について、以下の内容を参考にしてください。
背景画像が表示されない
- トラブルの原因と対処法を見る
-
・トラブルの原因例
- 画像ファイルのパス（場所）が間違っている場合や、拡張子の記述ミスなどがよくあります。
- サーバーに画像がアップロードされていない、もしくはファイル名に全角文字やスペースが入っている場合も表示されない原因になります。
・トラブルの解決法
画像ファイルのパス指定やファイル名に誤りがないか、拡張子のタイプミスや余計なスペースが含まれていないかを確認しましょう。また、実際に指定したパスに画像ファイルが存在するか、サーバーやローカルのディレクトリで再チェックしてみてください。
背景画像が意図しないサイズで表示される
- トラブルの原因と対処法を見る
-
・トラブルの原因例
background-sizeの値が正しく指定されていなかったり、初期値のままになっていることで、画像が極端に小さく見えたり拡大しすぎてしまうことがあります。・トラブルの解決法
CSSで
background-sizeプロパティがどう設定されているか確認しましょう。値がautoやinheritなどのままになっていないか、また必要に応じてcoverやcontainを指定することで思い通りの表示になるか実際に値を変更しながら確認してみてください。
背景画像が複数回繰り返されてしまう
- トラブルの原因と対処法を見る
-
・トラブルの原因例
CSSで
background-repeatがデフォルト値（repeat）のままになっていると、画像が繰り返し表示されてしまいます。また、CSSの継承や優先度によって意図しない指定が反映されている場合もあります。・トラブルの解決法
CSSで
background-repeatプロパティがどのように指定されているかをスタイルシート全体で確認しましょう。もし指定がなければno-repeatを追加し、ほかのセレクタやメディアクエリで上書きされていないかも合わせて確認してみてください。
<<前のページ
HTML/CSSの記事一覧
次のページ>>