CSS で背景画像を複数指定する方法

CSS で背景画像を複数指定する方法を紹介します。
例えば、ブロック要素を増やさずに背景画像を複数指定したい時に便利な方法です。

背景画像を複数指定するには

CSSの背景を複数指定する場合、background プロパティの値をカンマ（,）区切りで指定します。
例えば、ふたつの背景画像を左上と左下に指定する場合は次の通りです。

.bg {

  background-image:

    url(img/bg-sample1.png),

    url(img/bg-sample2.png);

  background-position:

    left top,

    right bottom;

  background-repeat:

    no-repeat,

    no-repeat;

}

重なる順番やポジションの指定は次の通りです。
１層目）bg-sample1.png／ポジション：左上／繰り返しなし
２層目）bg-sample1.png／ポジション：右上／繰り返しなし

まとめ

CSS で背景画像を複数指定する方法を紹介しました。