background-repeat

CSSプロパティ「background-repeat」の解説とサンプル。

CSSレイアウト実践講座

CSSレイアウト実践講座について

運営者プロフィール

運営者ブログ*

お問い合わせ

background-repeat

背景画像の繰り返し方法を指定するプロパティ。

background-imagebackground-positionと同時に使用し、背景画像の位置を指定する。background-positionを指定しない場合は、左上を基準に、指定した繰り返し方法で背景画像を表示する。

repeat-x 横方向にのみ繰り返し。
repeat-y 縦方向にのみ繰り返し。
no-repeat 繰り返しなし。
repeat 全面に繰り返し。指定しない場合はこれが適用される。

使用例 - サンプル(A) / サンプル(B)

サンプル(A)

[CSSの記述]

.sampleA {
	background-image:url('hogehoge.gif');
	background-position:right;
	background-repeat:repeat-y;
}

[HTMLの記述]

<p class="sampleA">テキストテキスト</p>

[ブラウザ上の表示]

背景画像を「right」に指定し、縦に繰り返し表示。

サンプル(B)

[CSSの記述]

.sampleB {
	height:100px;
	background-image:url('hogehoge.gif');
	background-position:40px 10px;
	background-repeat:no-repeat;
}

[HTMLの記述]

<div class="sampleB">テキストテキスト</div>

[ブラウザ上の表示]

背景色を左から40px、上から10pxの位置に配置。