style.backgroundRepeatは、要素のスタイル属性のbackground-repeatプロパティの値を取得、もしくは、設定するプロパティ。
background-repeatプロパティは、要素の背景画像を水平方向（X軸）や垂直方向（Y軸）へ並べて表示するかどうかを指定することができる。
構文
取得
var $backgroundRepeat = $elementReference.style.backgroundRepeat;
戻り値
要素のスタイル属性のbackground-repeatプロパティの値。
設定
$elementReference.style.backgroundRepeat = "repeat | repeat-x | repeat-y | no-repeat | inherit";
- repeat | repeat-x | repeat-y | no-repeat | inherit
- 背景画像を水平方向（X軸）や垂直方向（Y軸）へ並べて表示するかどうか。
- 下記の何れかの方法で指定する。初期設定値は、「repeat」。
- repeat：水平方向（X軸）にも垂直方向（Y軸）にも並べて表示。
- repeat-x：水平方向（X軸）にだけ並べて表示。
- repeat-y：垂直方向（Y軸）にだけ並べて表示。
- no-repeat：並べない。
- inherit：親要素の「background-repeat」プロパティを継承。
サンプル
サンプルボックス要素
変更後のスタイルのbackground-repeatプロパティの値：
サンプルの動作について
- 「設定（repeat）」ボタンをクリックすると、「サンプルボックス要素」の背景画像を水平方向にも垂直方向にも並べて表示し、「変更後のスタイルのbackground-repeatプロパティの値：」の右横に「repeat」と表示する。
- 「設定（repeat-x）」ボタンをクリックすると、「サンプルボックス要素」の背景画像を水平方向にだけ並べて表示し、「変更後のスタイルのbackground-repeatプロパティの値：」の右横に「repeat-x」と表示する。
- 「設定（repeat-y）」ボタンをクリックすると、「サンプルボックス要素」の背景画像を垂直方向にだけ並べて表示し、「変更後のスタイルのbackground-repeatプロパティの値：」の右横に「repeat-y」と表示する。
- 「設定（no-repeat）」ボタンをクリックすると、「サンプルボックス要素」の背景画像を水平方向にも垂直方向にも並べずに、左上にだけ表示し、「変更後のスタイルのbackground-repeatプロパティの値：」の右横に「no-repeat」と表示する。
サンプルのソースコード
JavaScript
<script type="text/javascript">
function setBackground( $repeat ) {
var $elementReference = document.getElementById( "sample" );
$elementReference.style.backgroundRepeat = $repeat;
var $backgroundRepeat = $elementReference.style.backgroundRepeat;
document.getElementById( "sampleOutput" ).innerHTML = $backgroundRepeat;
}
</script>
function setBackground( $repeat ) {
var $elementReference = document.getElementById( "sample" );
$elementReference.style.backgroundRepeat = $repeat;
var $backgroundRepeat = $elementReference.style.backgroundRepeat;
document.getElementById( "sampleOutput" ).innerHTML = $backgroundRepeat;
}
</script>
HTML
<div id="sample" style="background: yellow url('http://alphasis.info/wp-content/uploads/2012/01/gimp-tutorial-12012402.jpg'); margin: 10px 0; width: 300px; height: 200px;">サンプルボックス要素</div>
<button onclick="setBackground('repeat');">設定（repeat）</button>
<button onclick="setBackground('repeat-x');">設定（repeat-x）</button>
<button onclick="setBackground('repeat-y');">設定（repeat-y）</button>
<button onclick="setBackground('no-repeat');">設定（no-repeat）</button>
<p>変更後のスタイルのbackground-repeatプロパティの値：<span id="sampleOutput"></span></p>
<button onclick="setBackground('repeat');">設定（repeat）</button>
<button onclick="setBackground('repeat-x');">設定（repeat-x）</button>
<button onclick="setBackground('repeat-y');">設定（repeat-y）</button>
<button onclick="setBackground('no-repeat');">設定（no-repeat）</button>
<p>変更後のスタイルのbackground-repeatプロパティの値：<span id="sampleOutput"></span></p>