background-repeat 【背景画像 表示の繰り返し方】
[IE5] [IE6] [IE7] [Fx1] [Fx2] [Op6] [Op7] [Ns6] [Ns7]
background-repeatプロパティは、背景画像の表示開始位置を指定する事が出来ます。値を横方向・縦方向の順にスペースで区切ってそれぞれ指定する事も出来ます。
repeat
縦横ともに、背景画像を繰り返して表示します。初期値です。
repeat-x
横方向のみ繰り返して表示します。
repeat-y
縦方向のみ繰り返して表示します。
no-repeat
背景画像を一回だけ表示してリピートはしません。
background-repeatの使用例
CSSファイル
.bgsp005 {
width: 300px;
height: 200px;
background-image: url(images/backsample.gif);
background-repeat: repeat-y;
background-color: #ddffff;
}
.bgsp006 {
width: 300px;
height: 200px;
background-image: url(images/backsample.gif);
background-repeat: repeat-x;
background-color: #ddffff;
}
HTMLソース
<p class="bgsp005">
background-repeatプロパティ使用例<br />
背景画像を縦位置のみ繰り返した例です。<br />
</p>
<p class="bgsp006">
background-repeatプロパティ使用例<br />
背景画像を横位置のみ繰り返した例です。<br />
</p>
表示すると
background-repeatプロパティ使用例
背景画像を縦位置のみ繰り返した例です。
background-repeatプロパティ使用例
背景画像を横位置のみ繰り返した例です。
背景関連項目
| background | 背景に関する指定をまとめて行う |
| background-attachment | 背景画像の固定・移動を指定する |
| background-color | 背景色を指定する |
| background-image | 背景画像を指定する |
| background-position(x y) | 背景画像の表示開始位置を指定する |
| background-repeat | 背景画像のリピートの仕方を指定する |
