CSSで背景画像を複数設定する

1つの要素に背景を複数指定したい場合、以前は要素を入れ子にして、それぞれに背景を指定する方法を行っていました。
CSS3から要素に複数の背景を指定できるようになったので、やり方をメモしておきます。

対応ブラウザ

背景の複数指定が対応しているブラウザはこちら。
IE9からの対応になります。

サンプルコード

複数指定する場合、カンマで区切って指定します。

HTML

<div id="sample"></div>

CSS

#sample {
	background:
		url(01.jpg) right top no-repeat,
		url(02.jpg) left bottom no-repeat;
}

背景複数指定のデモページ
重なり順は先に記述したほうが上になります。(サンプルの場合01.jpgが上)
　

プロパティ毎の指定でも使用できます。

CSS

#sample {
	background-image:
		url(01.jpg),
		url(02.jpg);
	background-position:
		right top,
		left bottom;
	background-repeat:
		no-repeat,
		no-repeat;
}

プロパティ毎の指定のデモページ
　

【参考サイト】

• CSS での複数の背景の利用方法 – CSS | MDN