背景画像の繰り返しの仕方を指定する

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

段落要素に背景画像の繰り返し設定を適用する サンプル

【厳選】合わせて読みたいおすすめ書籍

WEB制作支援サイトのHTMLタグボードだからオススメできる厳選書籍です。私が読んでいない本はオススメしません。

HTMLやCSS、Webデザインを体系的に学ぶなら

CSSを駆使したモダンなWebデザインを学ぶなら

最新情報をチェックしよう!