サイト制作に関するメモ書き

HOME > HTML・CSS > CSSで背景画像を複数設定する

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

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

対応ブラウザ

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

sets-a-plurality-of-background-image-in-css01

 

サンプルコード

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

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で背景画像を複数設定する” への1件のコメント

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

▲PAGE TOP