CSS - 複数のバックグラウンド

こんにちは、ウェブデザイン志望者の皆さん！今日は、CSSの複数のバックグラウンドの興味深い世界に飛び込みます。あなたの近所の親切なコンピュータ教師として、私は多くの例と説明を用いてこの旅を案内します。お気に入りの飲み物を手に取り、始めましょう！

文法

深淵には飛び込む前に、基本から始めましょう。CSSで複数のバックグラウンドを使用する文法は非常にシンプルです：

セレクター {
background: バックグラウンド1, バックグラウンド2, ..., バックグラウンドN;
}

各バックグラウンドはコンマで区切られ、最初から最後まで重ねられます。リストの最初のバックグラウンドが最上位に配置され、最後のものが最下位になります。パンケーキを積み重ねるのと同じです - 盤に最初に載せるパンケーキが上にきます！

CSS 複数のバックグラウンド - background-imageプロパティの使用

まずは background-image プロパティを使用した簡単な例を見てみましょう：

.multi-bg {
background-image:
url('top-image.png'),
url('bottom-image.png');
background-repeat: no-repeat, repeat;
background-position: center center, top left;
}

この例では、要素に2つのバックグラウンド画像を適用しています。 top-image.png は上に配置され、繰り返しはされません。一方、 bottom-image.png はその下に配置され、繰り返しされます。上の画像は中央に配置され、下の画像は左上から始まります。

CSS 複数のバックグラウンド - background-sizeプロパティの使用

次に、バックグラウンド画像のサイズをどのように制御できるかを見てみましょう：

.sized-bg {
background-image:
url('small-icon.png'),
url('large-pattern.png');
background-size: 50px 50px, cover;
background-repeat: no-repeat, repeat;
background-position: top right, center;
}

ここでは、 small-icon.png のサイズを50x50ピクセルに設定し、 large-pattern.png は要素全体を覆います。これにより、小さなロゴやアイコンと大きな背景パターンを組み合わせることができます。

CSS 複数のバックグラウンド - backgroundプロパティの使用

background ショートハンドプロパティを使用すると、すべてのバックグラウンドプロパティを一度に設定できます：

.shorthand-bg {
background:
url('top-layer.png') no-repeat center / 100px,
linear-gradient(to bottom, #f00, #00f) no-repeat center / cover;
}

この例では、画像とグラデーション背景を組み合わせています。画像は中央に配置され、100ピクセルのサイズに設定され、グラデーションは要素全体を覆います。カラフルなアイスクリームの上にチェリーをのせるようなものです！

CSS 複数のバックグラウンド - 全画面画像

時々、画像を全体の背景に覆いたいときがあります：

.full-size-bg {
background:
linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)),
url('landscape.jpg') no-repeat center center / cover;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 2em;
}

これにより、半透明のオーバーレイを含む全画面の背景画像が作成されます。ドラマティックなヘローセクションや全ページの背景に最適です。

CSS 複数のバックグラウンド - ヘローアイメージ

ヘローセクションの話題を取り上げて、それをどのように作成するか見てみましょう：

.hero-bg {
background:
linear-gradient(to right, rgba(0,0,0,0.7), rgba(0,0,0,0.1)),
url('hero-image.jpg') no-repeat center center / cover;
height: 80vh;
display: flex;
flex-direction: column;
justify-content: center;
padding: 0 20px;
color: white;
}

これにより、背景画像と左から右に fade out するグラデーションオーバーレイを含むヘローセクションが作成されます。ウェブサイトのグランドオープンの舞台を設定するようなものです！

CSS 複数のバックグラウンド - background-originプロパティの使用

background-origin プロパティは、バックグラウンド画像の位置を決定します：

.origin-bg {
background-image: url('pattern.png');
background-origin: content-box, padding-box, border-box;
background-repeat: no-repeat;
border: 10px dashed black;
padding: 20px;
}

このプロパティは、バックグラウンドの開始位置を要素のボックスモデルに関連付ける際に特に有用です。

CSS 複数のバックグラウンド - background-clipプロパティの使用

background-clip プロパティは、バックグラウンドがどれだけ広がるかを定義します：

.clip-bg {
background-image:
url('top-image.png'),
url('bottom-image.png');
background-clip: content-box, padding-box;
border: 10px solid rgba(0,0,0,0.5);
padding: 20px;
}

これにより、バックグラウンドをボックスモデルの異なる部分に剪辑することができ、興味深いレイヤー効果を作成できます。

CSS 複数のバックグラウンド - 関連プロパティ

以下は、複数のバックグラウンドとともに使用できる関連プロパティの一覧です：

プロパティ	説明
background-image	1つまたは複数の背景画像を設定
background-position	各背景画像の開始位置を設定
background-size	バックグラウンド画像のサイズを指定
background-repeat	バックグラウンド画像の繰り返し方法を設定
background-origin	バックグラウンド画像の配置エリアを指定
background-clip	バックグラウンドが要素内にどれだけ広がるかを定義
background-attachment	バックグラウンド画像がページの残りの部分と一緒にスクロールするか、固定されるかを設定

これらのプロパティは個別に使用することも、 background ショートハンドプロパティでより簡潔なコードを作成するために組み合わせることもできます。

そして、ここまでです、皆さん！あなたは今、CSSで素晴らしい複層背景を作成するための知識を身につけました。練習は完璧のために必要ですので、これらのプロパティを試してみてください。誰 knows? あなたは次のウェブデザインのトレンドを作るかもしれません！

ハッピーコーディング、そしてあなたの背景は常に完璧な層に重ねられますように！

Credits: Image by storyset