一つ前の章では画像のスタイルを変更する方法について学習しました。
今回は背景画像の設定方法について見ていきましょう。
Lesson3-1：ボックス配置の基礎を理解しよう
Lesson3-2：ボックスサイズを変更しよう
Lesson3-3：ボックスを自在に配置しよう
Lesson3-4：画像を自在に配置しよう
Lesson3-5：画像のスタイルを変更しよう
Lesson3-6：背景画像を設定しよう ◁今回はココ
Lesson3-7：リンクボタンを設置しよう
Lesson3-8：リストとテーブルのスタイルを変更しよう
Lesson3-9：CSS変数を理解しよう
Webページのデザインをより魅力的にするためには、文字やレイアウトだけでなく、視覚的な要素も重要です。
その中でも「背景画像」は、ページ全体の雰囲気や印象を大きく左右する効果的なデザイン手法のひとつです。
このレッスンでは、CSSを使って背景画像を簡単に設定する方法を学び、サイズや位置を調整して思い通りのデザインを作成するテクニックを身につけましょう。
<<前のページ
HTML/CSSの記事一覧
次のページ>>
背景画像とは
背景画像とはWebページの背景部分に配置される画像のことです。通常、テキストやコンテンツの背後に表示され、ページ全体のデザインや雰囲気を引き立てる役割を果たします。
例えば風景の写真を背景にすることで、自然を感じさせるデザインにしたり、グラデーション画像を使うことで、シンプルながらもスタイリッシュな印象を与えることができます。
背景画像は単なる装飾だけでなく、Webサイトのブランドイメージやメッセージを視覚的に伝える重要な要素です。
たとえばカフェのホームページならコーヒーの写真、旅行サイトなら美しい風景画像を背景に使用することで、訪問者に強い印象を残すことができます。
このレッスンではCSSを使用して背景画像を設定し、効果的にページデザインを向上させる方法を詳しく学んでいきます。
背景画像の基本設定
背景画像はCSSの background-image プロパティを使用することで簡単に設定できます。
このプロパティを使うことで、任意の画像をWebページの背景として表示することが可能です。
背景画像を設定する基本構文は以下の通りです。
selector {
background-image: url('画像のパス');
}selector: CSSで指定する要素（例：body、divなど）。url('画像のパス'): 表示したい画像の場所を指定します。画像ファイルは、相対パスまたは絶対パスで指定できます。
ページ全体に背景画像を設定する
以下のHTMLコードをコピーし、適切な画像のパスを指定してブラウザ表示してみてください。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>背景画像の基本設定</title>
<style>
body {
background-image: url('background.jpg'); /* 背景画像の指定 */
}
</style>
</head>
<body>
<h1>背景画像のサンプル</h1>
<p>このページは背景画像が設定されています。</p>
</body>
</html><style>タグの中で、CSSを直接記述しています。bodyタグに対してbackground-imageプロパティを指定しているため、ページ全体の背景に画像が表示されます。url('background.jpg')は、HTMLファイルと同じフォルダに保存された「background.jpg」という画像ファイルを参照しています。
背景画像のサイズ調整
背景画像を設定しただけでは、画像のサイズが意図した通りに表示されない場合があります。
画像が大きすぎたり、小さすぎたりして、デザインが崩れてしまうこともあります。
この問題を解決するために使用するのが、background-size プロパティです。
background-size プロパティの基本
background-size プロパティは、背景画像の表示サイズを調整するためのプロパティです。
このプロパティを使うことで、画像を拡大・縮小したり、特定のサイズにフィットさせたりすることができます。
基本構文は以下の通りです。
selector {
background-image: url('画像のパス');
background-size: 値;
}selector: CSSのセレクタ（例:body,divなど）値: サイズを指定する値（例:cover,contain,100px 200px,50% 50%など）
値の部分には具体的な数値のほかに、coverやcontainといった指定ができます。
cover と contain の違い
cover: 背景画像が要素全体を覆うように拡大または縮小されます。画像の一部がはみ出すことがありますが、余白はできません。contain: 背景画像が要素の中に完全に収まるように表示されます。画像全体が表示されますが、余白ができる場合があります。
背景画像の位置調整
背景画像を設定した後、画像の表示位置を細かく調整したい場合にはbackground-position プロパティを使用します。
このプロパティを使うことで、背景画像を中央、上部、下部、左右など、自由に配置することができます。
background-position プロパティの基本
background-position プロパティの基本構文は以下の通りです。
selector {
background-image: url('画像のパス');
background-position: 値;
}selector: CSSのセレクタ（例:body,divなど）。値: 画像の配置場所（例:center,top,right,bottom,leftなど）。
位置のキーワード指定
background-position では、以下のキーワードを使用して画像の配置を指定できます。
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 プロパティは、要素の背景に単色の色を設定するための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形式などの透過画像を使用する場合、背景色が透過部分に見えるため、デザインの自由度が高まります。
.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() を使うことで、背景画像と組み合わせた美しいデザインが作れます。
.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デザインを実現することができます。
まとめ
今回のレッスンでは、CSSを使った背景画像の設置方法について学びました。
背景画像はWebページの印象を大きく左右する重要な要素です。今回学んだCSSプロパティを活用することで、シンプルなデザインから複雑なレイアウトまで自由自在に表現できるようになります。
ここまで学習を進めてきたあなたは、確実にスキルを向上させています！ぜひ、実際に自分のWebページで試してみて、さまざまなデザインに挑戦してみてください。
継続的な練習が、さらなる成長につながります。お疲れさまでした！
FAQ｜CSSの背景画像設定に関するよくある質問
- Q1. 背景画像が表示されません。どうすればいいですか？
-
背景画像が表示されない原因はいくつか考えられます。以下のポイントをチェックしてみてください。
- 画像のパスが正しいか？
background-image: url("画像のパス");で指定する際、url()内のパスが間違っていないか確認しましょう。
- ファイル形式が適切か？
.jpg,.png,.webpなどの対応フォーマットを使用していますか？
- CSSが正しく読み込まれているか？
linkタグを使った外部CSSが正しく適用されているか、ブラウザの開発者ツールで確認しましょう。
- 画像のパスが正しいか？
- Q2. 背景画像を画面いっぱいに表示するにはどうすればいいですか？
-
background-size: cover;を使うと、背景画像を画面いっぱいに拡大・縮小して表示できます。以下のCSSを試してください。body { background-image: url("background.jpg"); background-size: cover; background-position: center; background-repeat: no-repeat; }この設定により、画面のどんなサイズでも適切に背景画像がフィットします。
- Q3. 背景画像の位置を好きな場所に調整するには？
-
background-positionプロパティを使うと、背景画像の表示位置を自由に変更できます。例えば、以下のように記述すると、画像が右下に配置されます。
body { background-image: url("background.jpg"); background-position: right bottom; }詳細な指定方法については、本記事の 「背景画像の位置調整」 セクションを参照してください。
- Q4. 背景画像の上に文字を表示するには？
-
background-imageで指定した背景画像の上にテキストを配置したい場合は、画像を設定した要素にposition: relative;を指定し、その中にposition: absolute;を持つテキスト要素を配置するのが一般的です。.container { background-image: url("background.jpg"); background-size: cover; position: relative; height: 300px; } .text { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: white; }この方法なら、背景画像の上にきれいに文字を配置できます。
- Q5. 背景色と背景画像を組み合わせるには？
-
background-colorとbackground-imageを併用することで、背景画像の下に色を設定できます。例えば以下のCSSを使うと、背景色の上に半透明の画像を重ねられます。
body { background-color: #f0f0f0; background-image: url("background.png"); background-size: cover; background-blend-mode: multiply; }詳しくは 「背景色と背景画像を組み合わせる方法」 の章で解説しているので、参考にしてください。
練習問題3-6：背景画像と背景色を組み合わせたデザインを作ろう！
以下の条件に従って、背景画像と背景色を組み合わせたオリジナルのデザインを作成してみましょう。
ファイル名は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>初めてのWebサイトを作ろう3-6
このサイトの Lesson1-1（HTML学習の入り口） か Lesson2-1（CSS学習の入り口）から順番に学習していくことで、HTMLとCSSの基本情報をまとめたあなたのWebサイトを作成できます。
サイトのタイトルは「自分で作る！HTML＆CSSの学習サイト」
この「初心者のためのプログラミングテキスト＆問題集」で紹介しているHTMLやCSSの情報・知識、覚えるべきタグなど簡潔にまとめ、後から辞書のように使えることを目標としています。
- Webサイト制作に挑戦する人はここをクリック！
-
自分だけのWebサイト制作にはベースとなる基本セットが必要になります。
まだ入手していない人はLesson1-1かLesson2-1のページ下部からダウンロードして下さい。
Lesson3-6のまとめノートと練習問題を追加しよう
この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も、引き続き頑張ってください^^
<<前のページ
HTML/CSSの記事一覧
次のページ>>
この記事への質問・コメント
この記事を作成するにあたりAIの力を借りています。
問題ないことは確認していますが、もし間違いや表現の違和感などありましたら、ご指摘頂けると大変助かります。