CSS3 Pre-Reference



background-repeat

背景画像の繰り返し

試す

サンプル

書いてある個数分の背景画像が書いてある方向に繰り返し表示されていれば対応しています。

1:no-repeat

1:repeat

1:space

1:round

1:repeat-x

1:repeat-y

1:space round

1:no-repeat, 2:no-repeat

1:repeat-x, 2:repeat-y

1:repeat-x, 2:repeat-y, 2:repeat-x

コメントする


対応ブラウザ

Firefox
すべて
Chrome/Safari
すべて
Opera
すべて
InternetExplorer
すべて

パラメータ

repeat-x | repeat-y | [repeat | space | round | no-repeat]{1,2}[, [repeat-x | repeat-y | [repeat | space | round | no-repeat]{1,2}]*
初期値 repeat
適用 すべての要素
継承 しない
レベル 1
%の解釈 -
適用メディア Visual
参考文献 CSS Backgrounds and Borders Module Level 3#3.4. The ‘background-repeat’ property

解説

背景画像の繰り返し方法を指定します。

地味にCSS3になって拡張されています。上下方向それぞれにrepeat, space, round, no-repeatが指定でき、repeat-x, repeat-yはそのショートハンドという位置付けになっています。

新しいキーワード”space”、”round”はそれぞれ、残り1回以下の繰り返しで切れる場合の扱いです。”space”は余白を各背景画像の間に等分し、”round”はそのスペースが無くなるように調整します。調整方法は”background-size”で指定します。

また、複数背景が指定できるようになったのに伴い、カンマで区切って連続で複数指定できるようになりました。指定された値が背景画像の数より多すぎる場合は切り捨て、少ない場合は背景画像の数と合致するまで繰り返します。

つまり、以下のようなことです。下線(または背景色付き文字)が補填分、取消線が削除分です。

実は、現時点で最も対応状況が良いのはInternetExplorer9です。最も、計算方法を少し間違えているようですが。

background-image: url(flower.png), url(ball.png), url(grass1.png); background-repeat: no-repeat, no-repeat, no-repeat;

background-image: url(flower.png), url(ball.png), url(grass1.png), url(toy.png), url(pin.png); background-repeat: no-repeat, space, no-repeat, space, no-repeat;

background-image: url(flower.png); background-repeat: no-repeat, space, no-repeat;

ショートハンド換算では溢れている場合で非ショートハンド換算では充足していない場合の扱いについては、明確な記載がありません。今後の改訂が予測されます。

トラックバック

投稿されたコメント