HTML & CSS

レシピ

画像

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

要素の背景画像を1つだけではなく、複数設定する方法を解説します。

この記事のポイント

  • 複数の背景画像を指定する
  • 背景画像を表示する順番を考える
  • backgroundプロパティで一括指定する

目次

背景画像を複数指定する

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

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

1つ目の背景画像
1つ目の背景画像
2つ目 & 3つ目の画像
2つ目 &3 つ目の画像

次のように記述すると、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;
}
表示例
表示例

こちらの記事は役に立ちましたか?

ありがとうございます。
もしよろしければ、あわせてフィードバックや要望などをご入力ください。

ありがとうございます。
コメントを送信しました。