background-repeatについて解説
background-repeat とは
background-repeat とは、背景画像の繰り返し方法を指定するプロパティです。
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;
}上記のように 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;
}上記のように 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;
}上記のように 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;
}上記のように 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;
}上記のように 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;
}上記のように background-repeat: round; を指定すると背景全体を画像で埋まるように繰り返して配置し必要に応じて画像サイズを拡大・縮小します。
今回のまとめ
この記事では background-repeat について解説しました。
background-repeat とは、背景画像の繰り返し方法を指定するプロパティです。
background-repeat を指定するときは repeat、 repeat-x、 repeat-y、 no-repeat、 space、 round のどれかを使って指定します。
この記事を見て使い分けられるようになると嬉しいです。
最後までお読みいただきありがとうございます。