background-repeat
CSSの書き方
background-repeat:値 ;
| CSSの詳細情報 | |||||
|---|---|---|---|---|---|
| プロパティ名 | background-repeat | 読み方 | バックグラウンド・リピート | ||
| 初期値 | repeat | 意味 | 背景画像の繰り返し設定 | ||
| 値 | repeat/repeat-x/repeat-y/no-repeat | ||||
| 対象 | すべての要素 | ||||
| CSSレベル | CSSレベル1 | 対応ブラウザ | Windows | MAC | |
| 継承 | しない | IE 5.0以上/FF1.0/NS7.1/OP8.0 | SF/IE5.0 | ||
解説
「background-repeat」プロパティは、背景画像の繰り返しを設定するスタイルシートです。
通常、「background-image」プロパティによって、背景画像を読み込んだ場合、背景画像は繰り返して全面に表示されます。
これは、「background-repeat」プロパティの初期値（repeat）にもあるように、標準では背景画像は繰り返して表示されるためです。
repeat-x、repeat-y
これらの値は、背景画像を一方向にだけ繰り返します。
「repeat-x」は横方向（x軸方向）、「repaet-y」は縦方向（y軸方向）にのみそれぞれ繰り返されて表示されます。
no-repeat
no-repeatと設定した場合、背景画像はどの方向にも繰り返さず、1回だけ（素のまままで）表示されます。
表示する位置については別途「background-position」プロパティで設定します。
CSS/HTMLサンプル
p { width:350px; height:120px; background-image:url(../../img/bg_smp.gif); }
p.x-posit { background-repeat:repeat-x; }
p.y-posit { background-repeat:repeat-y; }
p.no-posit { background-repeat:no-repeat; }
段落要素に背景画像の繰り返し設定を適用する サンプル
