仕様

background-repeat<repeat-style>#
一括/個別個別指定プロパティ
初期値repeat
適用対象すべての要素
継承なし
百分率なし
計算値リスト、各項目はキーワードのペア、ディメンションごとに1つ
補足<repeat-style> = repeat-x | repeat-y
| [repeat | space | round | no-repeat]{1,2}

background-repeat プロパティは、要素の背景画像の反復方法を設定する個別指定プロパティです。
非継承プロパティで、初期値は repeat なので、省略時は repeat が指定値となります。

値の数

  1. cdvSample610 > div { height: 6em; background-image: url(./sample16.png),url(./sample32.png),url(./sample.png); background-position: top left,top right,bottom left; background-repeat: no-repeat; outline: solid 1px; }
  1. <div class="cdvSample510">
  2. <div style=""></div></div>

例示の雛型です。style属性を書き換えて例示しています。
background-image プロパティに画像が複数組み指定してある為、background-repeat プロパティも同じだけ繰り返されます。

  1. background-repeat: repeat no-repeat, no-repeat repeat;

２組 を指定しました。ボックスの背景は、CSS3で複数のレイヤーを持つことができます。レイヤーの数は、background-image プロパティのカンマ区切り値の数によって決まります。
この例示の場合は、background-image プロパティのカンマ区切り値の数は３つです。 その結果、background-repeat プロパティのカンマ区切り値の数は３つ必要となります。余った分は無視され、足りない分は記述順に繰り返しで順次補足されます。
background-repeat: repeat no-repeat, no-repeat repeat, repeat no-repeat; として扱われます。

値の組み合わせ

  1. cdvSample600 > div { height: 7em; background-image: url(./sample.png); outline: solid 1px; }
  1. <div class="cdvSample600">
  2. <div style=""></div></div>

例示の雛型です。style属性を書き換えて例示しています。

  1. background-repeat: round space;

値２つ を指定しました。最初の値は水平方向の繰り返しの振る舞いを表し、2 つ目の値は垂直方向の振る舞いを表します。

  1. background-repeat: space;

値１つ を指定しました。この場合、指定した値それぞれによって、と水平方向，垂直方向の繰り返しの振る舞いを表します。

キーワード

  1. cdvSample600 > div { height: 7em; background-image: url(./sample.png); outline: solid 1px; }
  1. <div class="cdvSample400">
  2. <div style=""></div></div>

例示の雛型です。style属性を書き換えて例示しています。

  1. background-repeat: repeat-x;

キーワード repeat-x の値を指定しました。repeat-x は、repeat no-repeat という指定を意味し、水平方向には背景の描画領域をカバーするために必要なだけこの方向に繰り返されます。垂直方向には画像は一度だけ配置され、この方向には繰り返されません。
background-repeat:repeat no-repeat; と同じ意味です。repeat-x は、値２つ指定では無効です。

  1. background-repeat: repeat-y;

キーワード repeat-y の値を指定しました。repeat-y は、no-repeat repeat という指定を意味し、水平方向には画像は一度だけ配置され、この方向には繰り返されません。垂直方向には背景の描画領域をカバーするために必要なだけこの方向に繰り返されます。
background-repeat:no-repeat repeat; と同じ意味です。repeat-y は、値２つ指定では無効です。

  1. background-repeat: repeat;

キーワード repeat の値を指定しました。repeat は値１つの場合は、repeat repeat という指定を意味し、水平方向，垂直方向には背景の描画領域をカバーするために必要なだけこの方向に繰り返されます。
background-repeat:repeat repeat; と同じ意味です。repeat は、値２つ指定でも有効です。
repeat は background-repeat プロパティの初期値です。

  1. background-repeat: space;

キーワード space の値を指定しました。space は値１つの場合は、space space という指定を意味し、水平方向，垂直方向には画像は、クリッピングされずに背景の配置領域内に収まる頻度で繰り返され、その後、画像は領域を埋めるために間隔を空けられます。最初と最後の画像が領域の端に接しています。場合背景の絵の領域が背景配置領域よりも大きい場合、パターンの反復は、背景絵の領域を充填します。この方向の画像の2つのコピーに十分なスペースがない場合を除いて、この方向のbackground-positionの値は無視されます。この場合、1つの画像のみが配置され、background-positionがこの方向の位置を決定します。
background-repeat:space space; と同じ意味です。space は、値２つ指定でも有効です。

  1. background-repeat: round;

キーワード round の値を指定しました。repeat は値１つの場合は、round round という指定を意味し、水平方向，垂直方向には画像は、背景の配置領域に収まる頻度で繰り返されます。整数に収まらない場合は、再スケーリングして、収まるようにします。background-sizeの下の式を参照してください。場合背景の絵の領域が背景配置領域よりも大きい場合、パターンの反復は、背景絵の領域を充填します。
background-repeat:round round; と同じ意味です。round は、値２つ指定でも有効です。

  1. background-repeat: no-repeat;

キーワード no-repeat の値を指定しました。no-repeat は値１つの場合は、no-repeat no-repeat という指定を意味し、水平方向，垂直方向には画像は一度だけ配置され、この方向には繰り返されません。
background-repeat:no-repeat no-repeat; と同じ意味です。no-repeat は、値２つ指定でも有効です。

CSS全体のキーワード

値を１つのみ指定して全体に対して適用されています。１つ１つに対するキーワードとしての使用は出来ません。
個別に適用したい場合は、個別指定プロパティ(border-top-color, border-right-color, border-bottom-color, border-left-color)を使用して設定します。

  1. cdvSample650 > div { height: 4em; background-image: url(./sample.png); padding: 2em; background-repeat: round space; outline: solid 1px; }
  2. cdvSample650 > div > div { height: 4em; background-image: url(./sample.png); outline: solid 1px; }
  1. <div class="cdvSample650">
  2. <div><div style=""></div></div></div>

例示の雛型です。子要素のstyle属性を書き換えて例示しています。
パティングは、親子の余白として指定しています。高さの指定は、意図的に子要素を親要素からはみ出させる事により背景の色を継承しているのか透過しているのか明確化する為に記述しています。

  1. background-repeat: inherit;

キーワード inherit を指定しました。inherit は、明示的な継承です。

  1. background-repeat: initial;

キーワード initial を指定しました。initial は、プロパティの初期値を設定します。background-repeat プロパティの初期値は repeat です。

  1. background-repeat: unset;

キーワード unset を指定しました。unset は、プロパティをリセットし継承プロパティなら継承，非継承プロパティなら初期値を設定します。background-repeat プロパティは非継承プロパティなので初期値の repeat を設定します。