background-imageプロパティは何に使用されますか？

background-imageプロパティは、要素の背景に画像を設定するために使用されます。

複数の背景画像を設定する方法は？

複数の背景画像を設定するには、カンマで区切って複数の画像を指定します。

background-imageを使用する際の注意点は？

背景画像のサイズや位置、繰り返し設定を適切に行い、読み込み速度やデザイン性に配慮することが重要です。

【CSS】background-image プロパティの使い方 - 背景画像を設定する方法

概要

CSSのbackground-imageプロパティは、要素の背景に画像を設定するためのプロパティです。ウェブページの視覚的な魅力を高めるために多く使用されるプロパティで、背景の装飾や雰囲気を演出することができます。本記事では、background-imageの基本的な使い方や複数の背景画像の設定方法、デザイン性を高めるテクニックについて詳しく解説します。

background-imageの基本構文

background-imageプロパティの基本的な構文は以下のとおりです。

background-image: url('画像のパス');

url('画像のパス')
画像のファイルパスを指定します。絶対パスや相対パス、オンライン画像のURLなども指定可能です。

基本的な使い方

以下は、要素の背景に画像を設定する基本的な例です。

body {
    background-image: url('background.jpg');
}

このコードは、body要素の背景にbackground.jpgという画像を設定します。画像はデフォルトで繰り返し表示されます。

背景画像の繰り返し設定

デフォルトでは、背景画像は要素全体に繰り返し（リピート）されます。background-repeatプロパティを使用して、繰り返しの方法を制御できます。

/* 繰り返しなし */
body {
    background-image: url('background.jpg');
    background-repeat: no-repeat;
}
/* 横方向にのみ繰り返す */
body {
    background-image: url('background.jpg');
    background-repeat: repeat-x;
}
/* 縦方向にのみ繰り返す */
body {
    background-image: url('background.jpg');
    background-repeat: repeat-y;
}

背景画像の位置設定

背景画像の表示位置は、background-positionプロパティで調整できます。値にはキーワード（top, bottom, center など）、パーセンテージ、またはピクセルを使用します。

body {
    background-image: url('background.jpg');
    background-repeat: no-repeat;
    background-position: center; /* 中央に配置 */
}

背景画像のサイズ調整

background-sizeプロパティで、背景画像のサイズを調整することができます。

contain：画像全体を表示し、要素内に収まるように縮小します。
cover：要素全体を覆うように画像を拡大しますが、画像の一部がカットされる可能性があります。
数値（px, %）：指定したサイズに画像を変更します。

/* 画像全体を要素内に収める */
body {
    background-image: url('background.jpg');
    background-size: contain;
    background-repeat: no-repeat;
}
/* 要素全体を覆うように画像を拡大 */
body {
    background-image: url('background.jpg');
    background-size: cover;
}

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

CSSでは、1つの要素に対して複数の背景画像を設定することが可能です。複数の画像をカンマで区切って指定し、それぞれの画像に個別の設定を行うことができます。

body {
    background-image: url('background1.png'), url('background2.png');
    background-position: left top, right bottom; /* 各画像の位置を指定 */
    background-repeat: no-repeat, no-repeat;
}

この例では、background1.pngが左上に、background2.pngが右下に表示されます。

背景画像の固定・スクロール設定

background-attachmentプロパティで、背景画像がスクロールするか固定するかを設定できます。

scroll（デフォルト）：ページと一緒に背景画像がスクロールします。
fixed：背景画像が固定され、ページのスクロールに影響されません。
local：コンテンツがスクロールする際に、背景も一緒にスクロールします。

body {
    background-image: url('background.jpg');
    background-attachment: fixed; /* 画像を固定 */
}

`CSS`グラデーションとの組み合わせ

background-imageでは画像だけでなく、CSSグラデーションも使用できます。これにより、画像とグラデーションを重ね合わせて、より洗練されたデザインを作成することが可能です。

body {
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('background.jpg');
    background-size: cover;
    background-blend-mode: overlay; /* 画像とグラデーションを重ねる */
}

背景画像設定のベストプラクティス

画像の最適化
高品質な画像を使用しつつ、ファイルサイズを最小限に抑えることが重要です。ページの読み込み速度に影響を与えないように、画像の圧縮を行いましょう。
レスポンシブデザインの考慮
background-size: cover;を使用して、異なる画面サイズでも背景画像が適切に表示されるようにします。また、メディアクエリを使用して、デバイスに応じた画像の切り替えも検討しましょう。
アクセシビリティの向上
背景画像はコンテンツの視認性に影響を与えるため、コントラストを意識し、必要に応じてbackground-blend-modeを使用して視認性を確保します。

まとめ

background-imageプロパティは、ウェブページに視覚的な魅力を加えるための強力なツールです。画像のサイズ、位置、繰り返し設定などを適切に調整することで、デザイン性とパフォーマンスのバランスを保ちながら、見栄えの良いウェブページを作成できます。複数の背景画像やグラデーションの活用により、さらに洗練されたデザインを実現することが可能です。

参照:

`CSS` background-image property - MDN Web Docs

概要