背景

background-repeat

background-repeat は、背景画像をくり返して敷き詰めるかどうかと、その並べ方を指定します。初期値の repeat はタイルのようにくり返し、端に収まりきらない画像は途中で切れます。

構文<repeat-style># …

<repeat-style>#

<repeat-style> = repeat-x | repeat-y
  | [ repeat | space | round | no-repeat ]{1,2}

プリセット

見本

画像

右下の角をドラッグするとサイズを変えられます

.box {
  background-image: url(/sample.svg);
  background-size: 36px;
  background-repeat: space;
}

background-repeatspace

横と縦を同じ値にする

repeatspaceroundno-repeat

解説

repeat：領域を覆うまでくり返します。初期値です。端に収まりきらない画像は途中で切れます。
space：切れずに収まる枚数だけ並べ、余った長さを画像どうしのすき間に均等に配ります。両端の画像は領域の端にぴったり付くので、その向きの background-position は効きません。ただし 2 枚入らないときは 1 枚だけ置き、その位置は background-position で決まります。
round：割り切れないときは画像を伸び縮みさせて、ちょうどの枚数で並べます。枚数は「領域の長さ ÷ 画像の長さ」をいちばん近い整数に丸めたものです。たとえば幅 240px に 36px の画像なら 6.67 枚なので、7 枚にして 1 枚の幅を 34.3px に縮めます。space と違って background-position は効いたままなので、初期値の左上からずらすと、両端の画像は途中で切れます。
no-repeat：くり返さず、1 枚だけ置きます。

2 つ書くと、1 つ目が横、2 つ目が縦の並べ方になります。1 つだけ書くと横と縦の両方に使われます。repeat-x は repeat no-repeat、repeat-y は no-repeat repeat と同じ意味で、横か縦の 1 列の帯になります。

round が片方の向きだけで、もう片方の background-size が auto なら、縦横比を保つようにもう片方も一緒に伸び縮みします。両方の向きを round にすると、それぞれの向きで別々に伸び縮みするので、縦横比が少し崩れることがあります。
space と round が枚数を合わせるのは、背景の位置の基準になる領域（background-origin、初期値は padding までの範囲）です。border の下にも背景を描くとき（background-clip の初期値）は、その外側にも同じ並びが続きます。
グラデーションには元の大きさがないので、background-size が auto のままだと領域いっぱいに 1 枚描かれ、くり返しても模様になりません。模様にするときは大きさも指定します。
カンマで区切ると、background-image のレイヤーごとに指定できます。
CSS Backgrounds Level 4 の草案には、横と縦を別々に書く background-repeat-x / background-repeat-y や、書字方向に沿った repeat-block / repeat-inline もありますが、今はどのブラウザも対応していません。
このページのプレビューでは、見本の画像を 36px の大きさで敷いています。箱の右下をドラッグして大きさを変えると、space と round の枚数が変わるのを確かめられます。