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

最新特集【一覧】

防水スピーカーをワイヤレス化、お風呂でのんびり音楽を楽しむ

自作バーコードで音楽CDを管理する

Perfumeが公開したダンスのモーションデータをChromeで扱う

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

　複数の背景画像に関する設定は、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;
}