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

　前回に続いて、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ピクセル）

Safari 3の表示

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;
	}

＆lt;div＆gt;FLOWER＆lt;/div＆gt;

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

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

Safari 3の表示

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;
	}

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