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

nas

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のサンプルです。

繰り返さない (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>

関連の記事

CSS background 背景色を指定するサンプル
CSS background-image 背景画像を指定する
CSS border-radius 四角の角を丸くするサンプル

△上に戻る