CSSで背景画像を設定する方法：初心者向けステップバイステップガイド

CSSのbackground-imageプロパティを使うと、Webサイトの背景を画像に変更できます。背景画像はbackground-image: url(画像のURL)という形式で設定します。また、このプロパティでは、重ねて表示する複数の背景画像を指定することも可能です。

背景画像は、モダンなWebサイトでおなじみの機能であり、美しく快適なユーザー体験を作り出すために欠かせません。Webデザイナーは、あらかじめ決めたテーマに合わせて、CSSのbackground-imageプロパティを使ってこの機能を自由にカスタマイズします。

本記事では、チュートリアルとサンプルコードを通じて、このCSSプロパティの使い方を丁寧に解説します。読み終える頃には、背景画像のカスタマイズをプロのように行えるようになっているでしょう。

CSS背景画像とは

background-imageプロパティは、Webページ上の要素の背景として画像を定義します。ページ全体の背景を設定するだけでなく、ページ内の特定のセクションに使われることも多いプロパティです。

Webページをデザインする際には、完成形に背景画像を取り入れるかどうかを事前に検討しておくことが大切です。

たとえば、「私たちについて（About Us）」ページをデザインするなら、チームメンバーの集合写真を背景に据えると効果的です。カフェのWebサイトなら、コーヒーカップの写真を使ったヘッダー画像を追加すると、雰囲気がぐっと伝わりやすくなるでしょう。

background-imageプロパティは、HTML要素の背景に画像を追加します。要素に背景画像を設定する基本の構文は次の通りです。

background-image: url(imageUrl);

imageUrlには、表示したい画像の場所（URL）を指定します。

CSS背景画像の実装例

ここでは、地元のカフェ「The Coffee Grind」のサイトをデザインするプロジェクトを進めていると想定しましょう。カフェ側からは、コーヒーカップのストック画像を使ったトップページのバナー作成を依頼されています。バナーの中央には「Welcome to The Coffee Grind」というテキストを配置する仕様です。

このバナーは、次のようなコードで実現できます。

index.html

<div class="image">
	<p class="header">Welcome to The Coffee Grind</p>
</div>

styles.css

.image {
	background-image: url(https://images.pexels.com/photos/683039/pexels-photo-683039.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260);
	height: 250px;
}

.header {
	padding-top: 50px;
	color: white;
	font-size: 20px;
	text-align: center;
}

コードの内容を分解して確認してみましょう。まずHTMLファイルでは、クラス名「image」を持つ<div>タグを定義しています。このタグの中で、Webページに「Welcome to The Coffee Grind」というテキストを表示しています。

続いてCSSファイルでは、「image」というクラスに対するスタイルルールを定義しました。これにより、バナーに背景画像が設定され、高さが250pxに指定されます。さらに「header」というクラスを定義し、ヘッダーテキストの見た目を整えています。

「header」クラスは、ヘッダーテキストの上部に50pxのパディングを適用し、文字色を白に設定します。加えて、フォントサイズを20pxに指定し、テキストを要素の中央に配置しています。

複数の背景画像を指定する

background-imageプロパティを使うと、1つの要素に複数の背景画像を割り当てることもできます。複数の背景画像を使用する場合の構文は以下の通りです。

background-image: url(image1), url(image2);

最初に指定した画像が要素の最前面に表示され、以降の画像はその背後に順番に重なっていきます。たとえば、先ほどのバナーの前面にコーヒーカップのアイコンを追加したい場合は、次のようなコードになります。

index.html

<div class="image">
	<p class="header">Welcome to The Coffee Grind</p>
</div>

styles.css

.image {
	background-image: url(https://img.icons8.com/wired/64/000000/coffee.png), url(https://images.pexels.com/photos/683039/pexels-photo-683039.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260);
	height: 250px;
}

.header {
	padding-top: 50px;
	color: white;
	font-size: 20px;
	text-align: center;
}

ご覧の通り、コーヒーカップのアイコンが背景画像の前面に追加されました。アイコンが前面に表示されているのは、背景画像リストの先頭に指定したためです。

背景画像のサイズを調整する

background-imageプロパティを使う際、コンテナ内での背景画像のサイズを細かく制御したいケースがあるでしょう。そんなときに活躍するのがbackground-sizeプロパティです。

background-sizeプロパティには、次の4種類の値を指定できます。

• auto：ブラウザが背景画像に最適なサイズを自動的に判断します（デフォルト値）。
• contain：画像全体が必ず表示されるようにします。画像がコンテナより小さい場合は元のサイズのまま表示され、埋まりきらない部分には余白が残ります。
• cover：コンテナ全体を覆い尽くすように画像を拡大・縮小します。
• 長さ（length）：背景画像の幅と高さを数値で指定します。1つ目の値が幅、2つ目の値が高さを表します。

背景サイズの変更方法

先ほどのコーヒーのバナー画像を、要素内に収めて表示したいとしましょう。つまり、コンテナを満たしていなくても画像全体を見せるということです。その場合は、次のようなコードを使用します。

index.html

<div class="image"></div>

styles.css

.image {
	background-image: url(https://images.pexels.com/photos/683039/pexels-photo-683039.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260);
	background-size: contain;
	height: 250px;
}

ご覧の通り、最初の例とは異なり、背景画像全体が表示されています。これは、コード内でbackground-sizeプロパティを指定し、値としてcontainを設定したためです。逆に、画像でコンテナ全体を覆いたい場合は、coverの値を使えばOKです。

また、ピクセル単位で画像のサイズを直接指定することも可能です。たとえば、画像を幅200px×高さ200pxで表示したい場合は、次のようなコードを書きます。

index.html

<div class="image"></div>

styles.css

.image {
	background-image: url(https://images.pexels.com/photos/683039/pexels-photo-683039.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260);
	background-size: contain;
	height: 200px;
	width: 200px;
}

この例では、画像が200px × 200pxのサイズで表示されます。

背景画像の位置を指定する

background-originプロパティを使うと、Web要素のコンテンツ、ボーダー、パディングのいずれかを基準に、背景画像の表示位置を指定できます。

background-originプロパティに指定できる値は、次の3つです。

• border-box：ボーダーボックスを基準に画像を配置します。
• content-box：コンテンツボックスを基準に画像を配置します。
• padding-box：パディングボックスを基準に画像を配置します（デフォルト値）。

ボーダー、コンテンツ、パディングの関係について詳しく知りたい方は、CSSボックスモデルに関する解説記事を参考にしてください。

それでは、実際に画像の配置を調整してみましょう。たとえば、背景画像をコンテンツボックスを基準に表示したい場合は、次のようなコードを使用します。

index.html

<div class="image"></div>

styles.css

.image {
	background-image: url(https://images.pexels.com/photos/683039/pexels-photo-683039.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260);
	border: 10px solid black;
	padding: 25px;
	background-origin: content-box;
	background-repeat: no-repeat;
	height: 250px;
}

この例では、背景画像がコンテンツボックスを基準に表示されています。画像のボーダーと背景画像の間に白い余白ができているのが分かるでしょうか。これが、background-originによる相対的な位置指定の結果です。

ここではbackground-origin: content-boxを指定することでこの表示を実現しました。同時にbackground-repeat: no-repeatも指定しています。このプロパティにより、画像の繰り返しが無効化され、画像はコンテンツボックス内だけに表示されます。background-originによって生じた余白部分に画像が回り込むことはありません。

まとめ

CSSでは、background-imageプロパティを使って要素の背景を画像に設定できます。この手法を活用すれば、単色やグラデーションではなく、画像を使ったオリジナルの背景を自由に作れます。

本記事では、background-imageプロパティの基本的な使い方から、複数画像の指定、background-sizeによるサイズ調整、background-originによる位置指定までを解説しました。これであなたも、CSSで背景画像を思いどおりにデザインするスキルを身につけたはずです。ぜひ実際のプロジェクトで試してみてください。