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

背景画像を複数指定する

HTML要素の背景画像は「, (半角コンマ)」で区切って複数指定することができます。

今回はサンプルとして、次の３つの画像を背景画像として指定します。

次のように記述すると、3つの画像を背景画像に設定することができます。

コード例

section {
	background-image: url(./images/star.svg), url(./images/logo.png), url(./images/pic_sample.jpg);
	background-position: right 10% bottom 10%, left 10% bottom, left top;
	background-size: 20% auto, 20% auto, 100% auto;
	background-repeat: no-repeat, no-repeat, no-repeat;
}

各画像のパス、ポジション、表示サイズ、繰り返し表示について、「,」で区切って指定しています。

背景画像の表示順序

背景画像が複数指定されている場合、パスで先に指定した画像が前側（上に被さる形）に表示されます。
例えば、先ほどのコードで画像パスを逆にすると次のようになります。

画像の指定を反対にしたコード例

section {
	background-image: url(./images/pic_sample.jpg), url(./images/logo.png), url(./images/star.svg);
	background-position: left top, left 10% bottom, right 10% bottom 10%;
	background-size: 100% auto, 20% auto, 20% auto;
	background-repeat: no-repeat, no-repeat, no-repeat;
}

先にサイズの大きい画像を指定してしまうと、後から指定した画像が隠れて見えなくなってしまいます。
画像サイズや見せ方によって、指定する順序を決めていくところがポイントです。

backgroundプロパティで一括指定する

背景画像が複数の場合においても、backgroundプロパティを使って一括指定することが可能です。
その場合においても「, (半角コンマ)」で区切って画像ごとに指定していきます。

コード例

section {
  background: url(./images/star.svg) right 10% bottom 10% / 20% auto no-repeat,
    url(./images/logo.png) left 10% bottom / 20% auto no-repeat,
    url(./images/pic_sample.jpg) left top / 100% auto no-repeat;
}