背景画像の繰り返しの仕方を指定する
CSSの書き方
background-repeat:値 ;
|
|||||||||||||||||||||||||||||||||||||||||
解説
「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; }
段落要素に背景画像の繰り返し設定を適用する サンプル
