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

背景画像を繰り返すサンプルです。

目次 background repeat
繰り返さない(no-repeat)
縦と横で繰り返し(repeat) / 横に繰り返し(repeat-x)
縦に繰り返し(repeat-y) / 領域に合わせて表示,画像の間にスペース(space)
領域に合わせて表示,画像の間にスペース(space)
領域に合わせて表示,画像のサイズを調整(round)

background repeat

書き方 background : url(画像) 値
background-repeat : 値
repeat・・・縦と横で繰り返します。
repeat-x・・・横に繰り返します。
repeat-y・・・縦に繰り返します。
space・・・領域に合わせて表示。画像の間にスペースを入れて表示します。
round・・・領域に合わせて表示。画像のサイズを調整します。
no-repeat・・・繰り返しません。
備考 画像の表示は高さ(height)が必要
初期値 repeat
継承 なし
参考(MDN) https://developer.mozilla.org/ja/docs/Web/CSS/background

繰り返さない (no-repeat)

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

横に繰り返し (repeat-x)

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

縦に繰り返し (repeat-y)

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

縦と横で繰り返し (repeat)

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

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

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

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

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

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

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

関連の記事

CSS background 背景色を指定するサンプル
CSS background url 背景画像を指定する

△上に戻る