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

インライン要素の背景画像の繰り返し方を指定するbackground-break

　background-breakは、インライン要素の背景画像の繰り返し方を指定するプロパティだ。「bounding-box」「each-box」「continuous」の3種類の繰り返し方を指定することができ、Firefoxでは-moz-background-inline-policyというプロパティ名で対応している。現在のところ、Safari 3やOperaは対応していない。

　次のソースではインライン要素を構成する<span>に対して、上から順に-moz-background-inline-policyを「bounding-box」「each-box」「continuous」と指定している。

Firefoxの表示

span	{
	background-color: #888888;
	background-image: url(flower-green.png);
	padding: 0.2em;
	line-height: 1.5;
	}

div.back01 span	{
	-moz-background-inline-policy: bounding-box; 
	}

div.back02 span	{
	-moz-background-inline-policy: each-box; 
	}

div.back03 span	{
	-moz-background-inline-policy: continuous;
	}

<div class="back01"><span>今日はいい天気です。今日はいい天気です。今日はいい天気です。今日はいい天気です。今日はいい天気です。今日はいい天気です。今日はいい天気です。今日はいい天気です。今日はいい天気です。</span></div>

<div class="back02"><span>今日はいい天気です。今日はいい天気です。今日はいい天気です。今日はいい天気です。今日はいい天気です。今日はいい天気です。今日はいい天気です。今日はいい天気です。今日はいい天気です。</span></div>

<div class="back03"><span>今日はいい天気です。今日はいい天気です。今日はいい天気です。今日はいい天気です。今日はいい天気です。今日はいい天気です。今日はいい天気です。今日はいい天気です。今日はいい天気です。</span></div>

　それぞれの値ごとの処理は次のようになっている。