CSS 3のbackground-sizeとbackground-break:FirefoxとSafariのCSS対応

エ・ビスコム・テック・ラボ
2008-03-10 17:15:01
  • このエントリーをはてなブックマークに追加

 前回に続いて、CSS 3で追加された背景に関するプロパティを確認していきたい。

 今回は、背景画像の大きさを指定するbackground-sizeと、インライン要素の背景画像の繰り返し方法を指定するbackground-breakを取り上げる。background-sizeにはSafari 3とOpera 9.5が、background-breakにはFirefoxが対応している。

 なお、背景に関する規格については、CSS 3の草案CSS3 Backgrounds and Borders Moduleを参考にする。

背景画像の大きさを指定するbackground-size

 background-sizeは、背景画像の大きさを指定するプロパティだ。現在、Safari 3が対応しており、-webkit-background-sizeというプロパティ名で利用することができる。また、Opera 9.5(ベータ版)も対応しており、-o-background-sizeというプロパティ名で利用することが可能だ。そこで、Safari 3とOpera 9.5で表示を確認していく。

 背景画像の大きさは、横幅と高さを半角スペースで区切って指定する。1つ目の値が横幅で、2つ目の値が高さとなる。次のソースでは、「flower-red.png」を背景画像として指定して、大きさを40×20ピクセルと指定した。

flower-red.png(50×62ピクセル) flower-red.png(50×62ピクセル)
Safari 3の表示 Safari 3の表示
Opera 9.5の表示 Opera 9.5の表示
div{
background-color: black;
background-image: url(flower-red.png);
padding: 30px;
-webkit-background-size: 40px 20px;
-o-background-size: 40px 20px;
}
<div>FLOWER</div>
ブラウザで表示を確認する

 画像の縦横比を維持して表示するには、横幅または高さのどちらかの大きさを指定し、もう一方を「auto」と指定する。次のソースでは、横幅をauto、高さを20ピクセルと指定した。

Safari 3の表示 Safari 3の表示
Opera 9.5の表示 Opera 9.5の表示
div{
background-color: black;
background-image: url(flower-red.png);
padding: 30px;
-webkit-background-size: auto 20px;
-o-background-size: auto 20px;
}
ブラウザで表示を確認する
このサイトでは、利用状況の把握や広告配信などのために、Cookieなどを使用してアクセスデータを取得・利用しています。 これ以降ページを遷移した場合、Cookieなどの設定や使用に同意したことになります。
Cookieなどの設定や使用の詳細、オプトアウトについては詳細をご覧ください。
[ 閉じる ]