CSS3

プロパティ

background-repeat

→● mdn

背景画像の敷き詰め法。

背景画像が、サイズされ、位置された後の、敷き詰め法を指定する。

<repeat-style>

＝repeat-x
| repeat-y
| [repeat | space | round | no-repeat]{1,2}

単独の成分による各種 値は、以下のように算出される：

指定値	算出値
repeat-x	repeat no-repeat
repeat-y	no-repeat repeat
repeat	repeat repeat
space	space space
round	round round
no-repeat	no-repeat no-repeat

[repeat | space | round | no-repeat]{1,2}

2 個のキーワード値は、順に［横方向、縦方向］用の敷き詰め法を与える。

<DIV style="border:10px dotted #0f0; width:80px; height:80px;
 padding:10px;
 background-image:url(Com/BG1.jpg);
 background-repeat:space repeat;
">■テスト</DIV>

repeat-x

<DIV style="border:10px dotted #0f0; width:80px; height:80px;
 padding:10px;
 background-image:url(Com/BG1.jpg);
 background-repeat:repeat-x;
">■テスト</DIV>

repeat-y

<DIV style="border:10px dotted #0f0; width:80px; height:80px;
 padding:10px;
 background-image:url(Com/BG1.jpg);
 background-repeat:repeat-y;
">■テスト</DIV>

repeat

画像は、当の方向に、背景塗り区画を覆い尽くすまで必要なだけ繰り返される。

<DIV style="border:10px dotted #0f0; width:80px; height:80px;
 padding:10px;
 background-image:url(Com/BG1.jpg);
 background-repeat:repeat;
">■テスト</DIV>

space

画像は、背景位置決め区画に収まる限り、切り取られずに繰り返された上で、最初と最後の画像が区画の両端に接するように、均等に間隔が空けられる。背景塗り区画が背景位置決め区画より大きければ、背景塗り区画を埋めるまでパタンが繰り返されることになる。background-position の対応する層値は、当の方向については、無視される ─ ただし、当の方向において画像 2 枚分に足る空間がない場合、画像は 1 枚だけ置かれ、background-position が 当の方向における画像の位置を決定する。

<DIV style="border:10px dotted #0f0; width:80px; height:80px;
 padding:10px;
 background-image:url(Com/BG1.jpg);
 background-repeat:space;
">■テスト</DIV>

round

画像は背景位置決め区画に収まる限り、できるだけ多く繰り返されるが、整数枚で埋め尽くせない場合は，そうなるように拡縮し直される。background-size に示されている公式を見よ。背景塗り区画が背景位置決め区画より大きければ、背景塗り区画を埋め尽くすまでパタンが繰り返されることになる。

<DIV style="border:10px dotted #0f0; width:80px; height:80px;
 padding:10px;
 background-image:url(Com/BG1.jpg);
 background-repeat:round;
">■テスト</DIV>

no-repeat

画像は 1 度だけ置かれ、当の方向には繰り返されない。

<DIV style="border:10px dotted #0f0; width:80px; height:80px;
 padding:10px;
 background-image:url(Com/BG1.jpg);
 background-repeat:no-repeat;
">■テスト</DIV>

body {
  background: white url("pendant.png");
  background-repeat: repeat-y;
  background-position: center;
}

2 個のキーワードとも no-repeat でないならば、背景塗り区画の全体が敷き詰められることになる ― 縦または横に 1 本だけ帯状に伸ばされるのではなく。

¶例を省く

¶例を省く

background-repeat と他の background-＊ プロパティの各 層値から、背景画像層がどの様に形成されるかについては、複数の背景画像による多層化を見よ。

テスト