SoyaBlog

これを見れば解決しそうや

HOME>CSS>background-repeatについて解説
ブログ投稿日時:
ブログ更新日時:
background-repeatについて解説

background-repeatについて解説

  1. background-repeat とは
  2. background-repeat の指定方法
  3. 今回のまとめ

1.background-repeat とは

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

2.background-repeat の指定方法

background-repeat で使える値は下記の6つです。

repeat … 背景画像を繰り返す (初期値)

repeat-x … 横方向にのみ背景画像を繰り返す

repeat-y … 縦方向にのみ背景画像を繰り返す

no-repeat … 背景画像は繰り返さない

space … 画像が重なることなく等間隔に並ぶように配置

round … 背景全体を画像で埋まるように繰り返して配置し必要に応じて画像サイズを拡大・縮小

それではそれぞれの指定方法と表示を見ていきましょう。

background-repeat: repeat; の指定方法と表示

<div class="background-repeat"></div>
.background-repeat {
  background-image: url(../images/post/background-repeat.png);
  background-repeat: repeat;
  width: 100%;
  height: 600px;
}
HTMLとCSSの表示

上記のように background-repeat: repeat; を指定すると横方向、縦方向の両方に背景画像を繰り返します。

background-repeat: repeat-x; の指定方法と表示

<div class="background-repeat-x"></div>
.background-repeat-x {
  background-image: url(../images/post/background-repeat.png);
  background-repeat: repeat-x;
  width: 100%;
  height: 600px;
}
HTMLとCSSの表示

上記のように background-repeat: repeat-x; を指定すると横方向に背景画像を繰り返します。

background-repeat: repeat-y; の指定方法と表示

<div class="background-repeat-y"></div>
.background-repeat-x {
  background-image: url(../images/post/background-repeat.png);
  background-repeat: repeat-y;
  width: 100%;
  height: 600px;
}
HTMLとCSSの表示

上記のように background-repeat: repeat-y; を指定すると縦方向に背景画像を繰り返します。

background-repeat: no-repeat; の指定方法と表示

<div class="background-repeat-no-repeat"></div>
.background-repeat-no-repeat {
  background-image: url(../images/post/background-repeat.png);
  background-repeat: no-repeat;
  width: 100%;
  height: 600px;
}
HTMLとCSSの表示

上記のように background-repeat: no-repeat; を指定すると背景画像を繰り返さないで表示します。

background-repeat: space; の指定方法と表示

<div class="background-repeat-space"></div>
.background-repeat-space {
  background-image: url(../images/post/background-repeat.png);
  background-repeat: space;
  width: 100%;
  height: 600px;
}
HTMLとCSSの表示

上記のように background-repeat: space; を指定すると画像が重なることなく等間隔に並ぶように配置されます。

background-repeat: round; の指定方法と表示

<div class="background-repeat-round"></div>
.background-repeat-round {
  background-image: url(../images/post/background-repeat.png);
  background-repeat: round;
  width: 100%;
  height: 600px;
}
HTMLとCSSの表示

上記のように background-repeat: round; を指定すると背景全体を画像で埋まるように繰り返して配置し必要に応じて画像サイズを拡大・縮小します。

3.

今回のまとめ

この記事では background-repeat について解説しました。

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

background-repeat を指定するときは repeat、 repeat-x、 repeat-y、 no-repeat、 space、 round のどれかを使って指定します。

この記事を見て使い分けられるようになると嬉しいです。

最後までお読みいただきありがとうございます。