background-repeat

解説

背景画像を指定した際に、どのように背景画像を繰り返し表示するかを指定します。「repeat」の指定で縦横に背景画像を繰り返し表示します。「repeat-x」の指定で横方向にのみ背景画像を繰り返し表示します。「repeat-y」の指定で縦方向にのみ背景画像を繰り返し表示します。「no-repeat」の指定で背景画像を一回のみ表示して繰り返し表示させません。繰り返しは右方向、下方向にだけされるのではなく、左方向、上方向にも繰り返される点に注意して下さい。

プロパティ情報

値：repeat、repeat-x、repeat-y、no-repeatの中から必ずどれか１つ。
初期値：repeat
適用対象：全ての要素
継承：しない
パーセンテージ：不可
適用メディア：視覚
レベル：1〜2

参照

color background-attachment background-color background-image background-position background-position-x background-position-y background-repeat

使用例

ソース

CSSの記述方法はスタイルシートってなに？も参照下さい。

p.sample {
	background-image    : url("../img/smp.gif");
	background-repeat   : no-repeat;
	background-position : 20px 80px;
	width               : 200px;
	height              : 200px;
	border              : 1px solid #0000ff;
}
HTMLの記述方法

<p class="sample">
表示例ではわかりやすくするために段落の周りを線で囲っています。
</p>

表示結果

表示例ではわかりやすくするために段落の周りを線で囲っています。