CSS background-repeatプロパティ
例
background-image を垂直方向のみに繰り返す：
body
{
background-image:url('paper.gif');
background-repeat:repeat-y;
}
試してみる »
タグの定義と使用説明
オブジェクトの background-image プロパティのタイル表示方法を設定します。
デフォルトでは、background-image は垂直および水平方向に繰り返されます。
| デフォルト値: | repeat |
|---|---|
| 継承: | no |
| バージョン: | CSS1 |
| JavaScript 構文: | object object.style.backgroundRepeat="repeat-y" |
ブラウザサポート
表内の数字は、そのプロパティをサポートする最初のブラウザバージョンを示します。
-webkit-、-ms-、-moz- の前にある数字は、そのプレフィックス付きプロパティをサポートする最初のブラウザバージョンです。
<| プロパティ | |||||
|---|---|---|---|---|---|
| background-repeat | 1.0 | 4.0 | 1.0 | 1.0 | 3.5 |
IE8 およびそれ以前のバージョンのブラウザは、1つの要素に複数の背景画像をサポートしていません。
注意IE7 およびそれ以前のバージョンは "inherit（継承）" の値をサポートしていません。IE8 では <!DOCTYPE> の定義が必要です。IE9 は "inherit（継承）" をサポートしています。
ヒントと注記
ヒント:background-position プロパティは背景画像の位置を設定します。指定された位置に背景がない場合、画像は常に要素の左上隅に配置されます。
プロパティ値
| 值 | 説明 |
|---|---|
| repeat | 背景画像は垂直および水平方向に繰り返されます。これがデフォルトです。 |
| repeat-x | 水平位置のみ背景画像が繰り返されます |
| repeat-y | 垂直位置のみ背景画像が繰り返されます |
| no-repeat | background-image は繰り返されません |
| inherit | background-repeat プロパティの設定が親要素から継承されるべきことを指定します |
オンライン例
この例では、背景画像を垂直および水平方向に繰り返す方法を示しています。
この例では、背景画像を水平方向のみに繰り返す方法を示しています。
この例では、背景画像を繰り返さずに一度だけ表示する方法を示しています。
関連記事
CSS チュートリアル:CSS Background
CSS リファレンス:background-position プロパティ
その他の拡張