CSS background-repeat 背景画像の繰り返しを指定

CSSの背景画像の繰り返し方法を指定するサンプルです。

サンプル	background-repeatプロパティの仕様
	繰り返さない (no-repeat) / 横に繰り返し (repeat-x) / 縦に繰り返し (repeat-y) / 横と縦で繰り返し (repeat) / 画像の間にスペース (space) / 画像のサイズを調整 (round)

background-repeatプロパティの仕様

background-repeat : 値
background : 値

background-repeatプロパティまたはbackgroundプロパティは、背景画像の繰り返し方法を指定します。

値	説明
repeat	横と縦で繰り返します。(初期値)
repeat-x	横に繰り返します。
repeat-y	縦に繰り返します。
space	領域に合わせて表示します。画像の間にスペースを入れて表示します。
round	領域に合わせて表示します。画像のサイズを調整します。
no-repeat	繰り返しません。
値を継承しない

backgroundのrepeatも背景画像の繰り返しを指定できます。
以下はMDNのbackground-repeatプロパティのリンクです。
https://developer.mozilla.org/ja/docs/Web/CSS/background-repeat
以下はMDNのbackgroundプロパティのリンクです。
https://developer.mozilla.org/ja/docs/Web/CSS/background

background-repeatのサンプルです。

繰り返さない (no-repeat)

<style>
  .box1 {
    background-repeat: no-repeat;
  }
  div {
    background-image: url(./images/test1.png);
    border: 1px solid #000;
    width: 200px;
    height: 100px;
  }
</style>
<div class="box1"> </div>

横に繰り返し (repeat-x)

<style>
  .box1 {
    background-repeat: repeat-x;
  }
  div {
    background-image: url(./images/test1.png);
    border: 1px solid #000;
    width: 200px;
    height: 100px;
  }
</style>
<div class="box1"> </div>

縦に繰り返し (repeat-y)

<style>
  .box1 {
    background-repeat: repeat-y;
  }
  div {
    background-image: url(./images/test1.png);
    border: 1px solid #000;
    width: 200px;
    height: 100px;
  }
</style>
<div class="box1"> </div>

横と縦で繰り返し (repeat)

丸を繰り返しますが右端に丸の一部が表示されています。

<style>
  .box1 {
    background-repeat: repeat;
  }
  div {
    background-image: url(./images/test1.png);
    border: 1px solid #000;
    width: 200px;
    height: 100px;
  }
</style>
<div class="box1"> </div>

画像の間にスペース (space)

<style>
  .box1 {
    background-repeat: space;
  }
  div {
    background-image: url(./images/test1.png);
    border: 1px solid #000;
    width: 200px;
    height: 100px;
  }
</style>
<div class="box1"> </div>

画像のサイズを調整 (round)

repeatとの違いは、右端に丸の一部が表示されていません。

<style>
  .box1 {
    background-repeat: round;
  }
  div {
    background-image: url(./images/test1.png);
    border: 1px solid #000;
    width: 200px;
    height: 100px;
  }
</style>
<div class="box1"> </div>