Style backgroundRepeat 属性

定義と用法

backgroundRepeat 属性設定または返り値がどのように背景画像を繰り返すか（タイル）を示します。

も参照してください：

HTML スタイル：background 属性

CSS チュートリアル：CSS 背景

CSS3 チュートリアル：CSS3 背景

CSS リファレンスマニュアル：background-repeat 属性

インスタンス

例 1

背景画像を繰り返しません（no-repeat）：

document.body.style.backgroundRepeat = "repeat-y";

自分で試してみてください

例 2

指定された DIV 要素の backgroundRepeat 属性を変更します：

document.getElementById("myDIV").style.backgroundRepeat = "repeat-x";

自分で試してみてください

例 3

背景画像を水平または垂直に繰り返します：

function repeatVer() {
  document.body.style.backgroundRepeat = "repeat-y";
}
function repeatHor() {
  document.body.style.backgroundRepeat = "repeat-x";
}

自分で試してみてください

例 4

ドキュメントの background-repeat 値を返します：

alert(document.body.style.backgroundRepeat);

自分で試してみてください

文法

backgroundRepeat 属性の返り値：

object.style.backgroundRepeat

backgroundRepeat 属性の設定：

object.style.backgroundRepeat = "repeat|repeat-x|repeat-y|no-repeat|initial|inherit"

属性値

値 説明
repeat 背景画像は垂直および水平に繰り返します。デフォルトです。
repeat-x 背景画像は水平にのみ繰り返します。
repeat-y 背景画像は垂直にのみ繰り返します。
no-repeat 背景画像は繰り返しません。
initial この属性をデフォルト値に設定します。参照してください initial。
inherit 親要素からこの属性を継承します。参照してください inherit。

技術的詳細

デフォルト値： repeat
返り値： 文字列で、背景画像がどのように繰り返されるかを示します。
CSS バージョン： CSS1

ブラウザのサポート

backgroundRepeat CSS1 (1996) の機能です。

すべてのブラウザが完全にサポートしています：

クローム エッジ ファイアフォックス サファリ オペラ IE
クローム エッジ ファイアフォックス サファリ オペラ IE
サポート サポート サポート サポート サポート サポート