縦方向にのみ背景画像を繰返します：
body
{
background-image: url("paper.gif");
background-repeat: repeat-y;
}
Try it Yourself ❯
他の "Try it Yourself" 例が下にあります。
background-repeat プロパティは、背景画像を繰返すか、繰返す場合どのように繰返すかを設定します。
背景画像は、デフォルトでは縦にも横にも繰返します。
チップ: 背景画像は、background-position プロパティに従い配置されます。 background-position が指定されていない場合、画像は常に要素の左上隅に配置されます。
| デフォルト値： | repeat |
|---|---|
| 継承： | 継承する |
| アニメーション可否： | 不可。animatable を参照 |
| バージョン： | CSS1 |
| JavaScript 構文： | object.style.backgroundRepeat="repeat-x" Try it |
表中の数字は、完全にプロパティをサポートした最初のブラウザのバージョンです。
| プロパティ | |||||
|---|---|---|---|---|---|
| background-repeat | 1.0 | 4.0 | 1.0 | 1.0 | 3.5 |
注: IE8 以前では、一つの要素に複数の背景画像をサポートしていません。
background-repeat: repeat|repeat-x|repeat-y|no-repeat|initial|inherit;
| 値 | 説明 | Play it |
|---|---|---|
| repeat | 背景画像を縦にも横にも繰返します。これがデフォルトです | Play it ❯ |
| repeat-x | 背景画像を横にのみ繰返します | Play it ❯ |
| repeat-y | 背景画像を縦にのみ繰返します | Play it ❯ |
| no-repeat | 背景画像は繰返しません | Play it ❯ |
| initial | プロパティにデフォルト値を設定します。initial を参照 | Play it ❯ |
| inherit | このプロパティは親要素を継承します。inherit を参照 |
横方向にのみ背景画像を繰り返す方法：
body
{
background-image: url("paper.gif");
background-repeat: repeat-x;
}
Try it Yourself ❯
背景画像を繰返さずに 1 回だけ表示する方法：
body
{
background-image: url("paper.gif");
background-repeat: no-repeat;
}
Try it Yourself ❯
CSS チュートリアル： CSS Background
CSSリファレンス：background-position property
HTML DOM リファレンス： backgroundRepeat プロパティ