先生と生徒の会話形式で理解しよう

生徒

「背景を複数重ねて表示したいんですが、CSSでできますか？」

先生

「はい、CSSでは複数の背景画像を1つの要素に重ねて設定することができます。」

生徒

「どうやって複数指定するんですか？順番は関係ありますか？」

先生

「順番はとても重要です！では、具体的な使い方を一緒に見ていきましょう。」

1. 複数の背景画像を指定する基本の書き方

CSSでは、1つのHTML要素に対して複数の背景を設定することができます。これは、背景画像や背景の色を何層にも重ねてデザインするのに便利です。

複数の背景を指定する場合は、カンマ（,）で区切って順番に書いていきます。

例えば次のように記述します。


<style>
.box {
    width: 300px;
    height: 200px;
    background-image: url("/img/top/rank01.jpg"), url("/img/top/rank02.jpg");
    background-size: 50px 50px, cover;
    background-repeat: repeat, no-repeat;
    background-position: top left, center center;
}
</style>

<div class="box"></div>

ブラウザ表示

この例では、2つの背景を重ねています。先に書いた画像が一番上（前面）に表示され、後に書いた画像が下になります（背面）。

2. 背景の重ね順（レイヤー順）に注意しよう

CSSでは、背景の指定は左側（先頭）が上に、右側（最後）が下に配置されます。つまり、最初に書いた画像ほど上に重なるという仕組みです。

この重ね順は、絵を描くときに透明なシールを何枚も重ねて貼るイメージをするとわかりやすいです。

3. 背景のプロパティは複数セットで指定しよう

background-image以外にも、background-size、background-position、background-repeatなどのプロパティをカンマで区切って同じ順序で書きましょう。

例えば、上の例のように、最初の背景にはrepeat（繰り返し）、2つ目にはno-repeat（繰り返さない）を適用しています。

4. 背景画像と背景色を一緒に使うことも可能

背景色も画像と一緒に指定することができます。色は背景画像の一番下（最後）に配置されます。


<style>
.sample {
    width: 300px;
    height: 200px;
    background-image: url("/img/top/rank01.jpg");
    background-color: #add8e6;
    background-repeat: no-repeat;
    background-position: center;
}
</style>

<div class="sample"></div>

ブラウザ表示

この場合、背景色の#add8e6（薄い青）がベースになり、その上に画像が中央に配置されます。

5. ショートハンドで背景を一括指定する方法

背景に関する指定は、1行にまとめて記述することもできます。これを「ショートハンド」と呼びます。


<style>
.shortcut {
    width: 300px;
    height: 200px;
    background: url("/img/top/rank01.jpg") no-repeat top center,
                url("/img/top/rank02.jpg") no-repeat bottom center,
                #f0f0f0;
}
</style>

<div class="shortcut"></div>

ブラウザ表示

このように書くことで、3つの背景を重ねて設定できます。背景色を最後に書くことで、一番下に表示されるようになります。

6. 注意点とよくあるミス

背景を複数使うときは、カンマの数と順番に注意が必要です。指定する背景の数に対して、各プロパティも同じ数だけ書くのが理想です。

例えば、background-imageで3つ指定したのに、background-repeatを1つしか指定しないと、すべての背景にその設定が適用されてしまいます。

また、画像サイズや位置が意図した通りにならない場合は、background-sizeやbackground-positionの指定を見直しましょう。

まとめ

複数の背景画像を重ねて表現する手法は、ウェブデザインにおいてきわめて柔軟で視覚効果の高い表現を可能にします。ひとつの要素に対して複数の背景レイヤーを設定できるという特性は、背景画像の組み合わせや位置調整、背景色との併用など、さまざまなデザインの幅を生み出します。とくに今回の記事では、背景画像をカンマ区切りで並べる手順や、上から順に表示される仕組み、背景サイズや繰り返し設定を複数の値で扱う方法などを丁寧に整理しました。背景レイヤーは「最初に書いたものほど前面に表示される」という基本を理解することで、自由度の高いレイアウトが思い通りに作れるようになります。

また、背景色は画像よりも下層に置かれるため、画像が透明部分を持つ場合でも色が自然に表示され、奥行きのある見栄えを実現できます。ショートハンド表記を使えば、複数の背景指定を1行でまとめることもでき、コードの見通しがよくなるため実務で大変便利です。ただし背景を複数指定する際には、プロパティごとに設定する値の順番を合わせることが重要で、意図しない表示を防ぐうえでも欠かせません。背景画像の組み合わせによる視覚効果は、ヘッダーデザインやバナー、アイコンの強調、パターン背景の統合など、どのようなデザインにも応用が利きます。

さらに、複数背景の活用は単に美しさを追求するだけでなく、情報を整理しながら視覚的に重要な要素を際立たせる役割も果たします。背景レイヤーの順番を調整することで、シンプルなデザインの中にもアクセントを加えられ、ユーザーの視線を自然に誘導する演出も可能になります。背景にパターン画像を繰り返し表示し、その下に柔らかな色を敷き、そのまた下に大きい写真を配置するなど、想像力次第で多様なデザインが生まれます。今回紹介したコード例を応用すれば、初心者でも直感的に試すことができ、レイヤーを変えるごとに表示がどう変わるかを実際に確かめることで理解が深まります。

複数背景の再確認サンプル


<style>
.summary-layer-box {
    width: 320px;
    height: 220px;
    background-image: url("/img/top/rank01.jpg"), url("/img/top/rank02.jpg"), url("/img/top/rank03.jpg");
    background-repeat: repeat, no-repeat, no-repeat;
    background-position: top left, center center, bottom center;
    background-size: 40px 40px, contain, cover;
    border: 1px solid #555;
}
</style>

<div class="summary-layer-box"></div>

ブラウザ表示

上記の例では、三層の背景を重ねています。最初に定義した画像が一番上、2番目に定義した画像が中間、3番目に定義した画像が最も下のレイヤーです。複数背景を扱う際には、この順序がデザインに直接関わるため、しっかりと意識して使いこなすことが重要です。

先生と生徒の振り返り会話

生徒

「複数の背景を重ねられることが、こんなにデザインの幅を広げるとは思いませんでした。順番が前後で変わるだけで全体の印象も大きく変わりますね。」

先生

「その通りです。背景レイヤーの仕組みは、要素を重ねる感覚に近いので、絵を描くように配置すると理解しやすいですよ。位置やサイズを調整することで、より繊細な表現もできます。」

生徒

「背景色もいっしょに使えるという点も便利ですね。透明部分がある画像の下に色を置くと見やすくなるのがよくわかりました。」

先生

「実際のサイト制作でも、背景色と背景画像をうまく組み合わせることが非常に多いですよ。ショートハンドでまとめて記述できる点も覚えておくと、コードの整理に役立ちます。」

生徒