SafariのCSS 3対応--1つの要素に複数の背景画像を表示する

複数の背景画像に関する設定をまとめて指定する

　複数の背景画像に関する設定は、backgroundプロパティでまとめて指定することができる。backgroundはCSS 1の時代から利用できたプロパティの1つで、CSS 3では複数の背景画像の設定を「,（カンマ）」で区切って指定することが可能だ。

　先ほどのソースの場合、次のように設定をまとめて記述することができる。このとき、background-originの値は、background-clipの値に続けて記述しなければならない。

Safari 3の表示

div	{
	background: 
		url(flower-yellow.png) no-repeat 3% 65% padding padding, 
		url(flower-green.png) repeat-x 50% 85% border padding, 
		url(white.png) no-repeat center center padding padding, 
		url(photo.png) no-repeat left top padding padding;
	-webkit-background-size: auto auto, 20px 20px, auto 200%, auto auto;

	border: dashed 20px navy;
	width: 300px;
	padding: 90px 0px;
	}

※ブラウザで表示を確認する

　-webkit-background-sizeの設定をbackground内に記述しなかったのは、現在のところSafari 3では記述に対応していないためだ。CSS 3の草案では、次のようにbackground-sizeの設定を ( ) で囲んで記述できることになっている。

div	{
	background: 
		url(flower-yellow.png) no-repeat 3% 65% border padding (auto auto), 
		url(flower-green.png) repeat-x 50% 85% border padding (20px 20px), 
		url(white.png) no-repeat center center padding padding (auto 200%), 
		url(photo.png) no-repeat left top padding padding (auto auto);

	border: dashed 20px navy;
	width: 300px;
	padding: 90px 0px;
	}