CSS 3で追加された背景に関するプロパティ：FirefoxとSafariのCSS対応

最新特集【一覧】

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

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

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

背景画像の表示位置の基点を指定するbackground-origin

　背景画像は、標準ではパディングの左上を基点「0 0」として表示されるが、background-originプロパティを利用すると罫線やコンテンツ部分の左上を基点にすることができる。

　FirefoxとSafari 3で表示位置の基点を指定するには、次のように-moz-background-originと-webkit-background-originを指定する。ここでは、上から順に罫線、パディング、コンテンツ部分の左上を基点とするため、それぞれ「border」「padding」「content」と指定している。また、background-repeatで背景画像は繰り返して表示しないように指定した。

Firefoxの表示

Safari 3の表示

div{
background-color: black;
background-image: url(flower-green.png);
background-repeat: no-repeat;
border: dashed 15px green;
padding: 30px;
}

div.back01{
-moz-background-origin: border;
-webkit-background-origin: border;
}

div.back02{
-moz-background-origin: padding;
-webkit-background-origin: padding;
}

div.back03{
-moz-background-origin: content;
-webkit-background-origin: content;
}

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

　なお、「background-clip:padding」と指定した場合、罫線部分の背景は表示されなくなるが、背景画像の基点には影響しない。次のようにbackground-clipを「padding」、background-originを「border」と指定すると、罫線部分の背景は表示されないが、背景画像は罫線の左上を基点に表示される。

Firefoxの表示

Safari 3の表示

div{
background-color: black;
background-image: url(flower-green.png);
border: dashed 15px green;
padding: 30px;
}

div.back01{
-moz-background-clip: padding;
-webkit-background-clip: padding;
-moz-background-origin: border;
-webkit-background-origin: border;
}

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