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

複数の背景画像の設定を記述できるプロパティ

　CSS 3において、複数の背景画像の設定を記述できるプロパティは次のようになっている。

• background-image
• background-repeat
• background-position
• background-clip
• background-origin
• background-size

　CSS 3から追加されたbackground-clip、background-origin、background-sizeは、Safariでは-webkit-を付けて次のように利用することが可能だ。これらのプロパティについて詳しくは、前回および前々回の記事を参照してほしい。なお、ここではborderプロパティを追加して、20ピクセルの太さの罫線（点線）で全体を囲むようにしている。

Safari 3の表示

div	{
	background-image: url(flower-yellow.png), url(flower-green.png), url(white.png), url(photo.png);
	background-repeat: no-repeat, repeat-x, no-repeat, no-repeat;
	background-position: 3% 65%, 50% 85%, center center, left top;
	-webkit-background-clip: padding, border, padding, padding;
	-webkit-background-origin: padding;
	-webkit-background-size: auto auto, 20px 20px, auto 200%, auto auto;
	border: dashed 20px navy;
	width: 300px;
	padding: 90px 0px;
	}

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

　-webkit-background-clipでは、flower-green.pngの表示範囲をborder（罫線部分）、それ以外の画像の表示範囲をpadding（パディング部分）と指定した。その結果、borderと指定した緑色の花の画像は罫線部分にも表示されるが、他の画像は表示されないことがわかる。

　-webkit-background-originでは背景画像の表示位置の基点をパディング部分に設定するため、値を「padding」と指定している。すべての背景画像を同じ値に設定する場合は、1つずつ値を指定する必要はない。

　最後に、-webkit-background-sizeでは背景画像の大きさを指定している。ここではflower-green.pngを20×20ピクセルに、white.pngの高さを200％に指定した。大きさを変更しない画像は「auto auto」と指定している。