background-repeat プロパティ

プロパティ background-repeat は、 要素の背景画像をどのように繰り返すかを 設定します。デフォルトでは、画像はX軸とY軸の両方で繰り返され、 これにより利用可能な領域全体が覆われます。

構文

cssセレクター {
  background-repeat: no-repeat | repeat | repeat-x | repeat-y | space | round;
}

値

デフォルト値: repeat - パターンで画面全体を覆います。

例

デフォルトでは、背景画像は要素全体を敷き詰めます：

html<div id="elem"></div>

css#elem {
  background-image: url("bg.png");
  width: 400px;
  height: 300px;
  border: 1px solid black;
}

Результат:

例

画像が繰り返されないようにしてみましょう：

html<div id="elem"></div>

css#elem {
  background-repeat: no-repeat;
  background-image: url("bg.png");
  width: 400px;
  height: 300px;
  border: 1px solid black;
}

Результат:

例

次に、画像をX軸方向に繰り返してみます：

html<div id="elem"></div>

css#elem {
  background-repeat: repeat-x;
  background-image: url("bg.png");
  width: 400px;
  height: 300px;
  border: 1px solid black;
}

Результат:

例

次はY軸方向です：

html<div id="elem"></div>

css#elem {
  background-repeat: repeat-y;
  background-image: url("bg.png");
  width: 400px;
  height: 300px;
  border: 1px solid black;
}

Результат:

例

軸方向に繰り返される画像は、background-position プロパティを使用して配置できます：

html<div id="elem"></div>

css#elem {
  background-repeat: repeat-y;
  background-position: top center;
  background-image: url("bg.png");
  width: 400px;
  height: 300px;
  border: 1px solid black;
}

Результат:

例

値 space の動作を見てみましょう：

html<div id="elem"></div>

css#elem {
  background-repeat: space;
  background-image: url("bg.png");
  width: 400px;
  height: 300px;
  border: 1px solid black;
}

Результат:

例

値 round の動作を見てみましょう：

html<div id="elem"></div>

css#elem {
  background-repeat: round;
  background-image: url("bg.png");
  width: 400px;
  height: 300px;
  border: 1px solid black;
}

Результат:

関連項目