CSS ・ 色・背景
background-repeat
背景画像の繰り返し
背景画像を繰り返して並べるかどうか、どの方向に並べるかを指定します。指定しない場合は、縦・横に繰り返して並びます。
01
サンプルコード
HTML
1<div class="grid">
2 <div class="box repeat"><span>repeat</span></div>
3 <div class="box x"><span>repeat-x</span></div>
4 <div class="box y"><span>repeat-y</span></div>
5 <div class="box none"><span>no-repeat</span></div>
6</div>
CSS
1.grid {
2 display: grid;
3 grid-template-columns: 1fr 1fr;
4 gap: 8px;
5}
6.box {
7 height: 80px;
8 padding: 4px 6px;
9 font-size: 12px;
10 text-align: right;
11 border: 1px solid #ccc;
12 background-color: #f3f2f2;
13 background-image: radial-gradient(#3a9ad9 45%, transparent 48%);
14 background-size: 24px 24px;
15}
16.box span {
17 padding: 0 4px;
18 background: #fff;
19}
20.repeat {
21 background-repeat: repeat;
22}
23.x {
24 background-repeat: repeat-x;
25}
26.y {
27 background-repeat: repeat-y;
28}
29.none {
30 background-repeat: no-repeat;
31}
02
実行結果
ブラウザでの表示青い丸1つ分が背景画像です（例では radial-gradient で画像の代わりにしています）
03
解説
background-repeat は、背景画像の繰り返し方向を指定するプロパティです。
初期値は repeat で、画像が要素より小さいと縦・横に繰り返して敷き詰められます。写真を1枚だけ表示したいときは no-repeat を指定します。
repeat-x は横方向だけ、repeat-y は縦方向だけに繰り返します。横に並べた模様や、縦に伸びる線などの装飾に使います。
04
応用例・注意点
繰り返し方向
| 値 | 説明 |
|---|---|
repeat | 初期値。横と縦に繰り返し配置される |
repeat-x | 横に繰り返し配置 |
repeat-y | 縦に繰り返し配置 |
no-repeat | 繰り返し配置しない |
space | 画像が切れないように、間隔を空けて並べる |
round | 画像が切れないように、大きさを調整して並べる |
小さな画像を敷き詰めて柄にする
小さな模様の画像を repeat で並べると、背景全体を柄にできます。
CSS
1.pattern {
2 background-image: url("../images/dot.png");
3 background-size: 16px 16px;
4 background-repeat: repeat;
5}
注意点
- 01background-size: contain で画像全体を収めると、余った部分に画像が繰り返し表示されます。1枚だけにしたいときは no-repeat を合わせます。