background-repeat

background-repeatは、背景画像の繰り返し方法を指定するスタイルです。

解説

background-repeatは、background-imageで指定した画像の表示方法について指定します。

背景画像の表示方法には「縦横繰返し」「縦のみ繰返し」「横のみ繰返し」「繰り返さない」の４パターンから選択できます。

構文

構文は以下になります。

値

background-repeatには以下の値が指定できます。

太字の値はデフォルト値です。

サンプル

←この画像を背景に指定します。

背景画像を繰り返さない

.sample01 {
  background-image:url('image/back01.png');
  background-repeat:no-repeat;
}

<div class="sample01">no-repeat</div>

背景画像を横方向（x方向）のみ繰り返す

.sample02 {
  background-image:url('image/back01.png');
  background-repeat:repeat-x;
}

<div class="sample02">repeat-x</div>

背景画像を縦方向（y方向）のみ繰り返す

.sample03 {
  background-image:url('image/back01.png');
  background-repeat:repeat-y;
}

<div class="sample03">repeat-y</div>

背景画像を縦横方向（xy方向）に繰り返す

.sample04 {
  background-image:url('image/back01.png');
  background-repeat:repeat;
}

<div class="sample04">repeat</div>

縦横方向に繰り返す動きがデフォルトなので、background-repeat:repeatは指定しなくても同様の表示となります。

関連項目

• background：背景に関するスタイルをまとめて指定する
• background-color：背景色を指定する
• background-image：背景に画像を指定する
• background-repeat：背景画像の表示方法を指定する
• background-position：背景画像の位置を指定する
• background-attachment：背景画像のスクロール方法を指定する
• background-clip：背景画像を表示する範囲を指定する
• background-size：背景画像のサイズを指定する

Tweet