background-repeat
背景画像の繰り返し方法を指定するプロパティ。
background-image、background-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の位置に配置。
- 前の記事：background-position
- 次の記事：background-attachment