| 属性名 | background-repeat |
|---|---|
| 値 | <repeat>[, <repeat>]* |
| 値の詳細 | <repeat> = repeat-x | repeat-y | [ repeat | no-repeat | space | round ]{1,2} |
| 初期値 | repeat |
| 適用可能要素 | すべての要素 |
| 継承 | 継承しない |
| メディア | visual |
| アニメーション | 不可 |
| サポート |
基本: https://caniuse.com/mdn-css_properties_background-repeat round: https://caniuse.com/mdn-css_properties_background-repeat_round space: https://caniuse.com/background-repeat-round-space |
背景画像の繰り返し方法を指定します。
| 値 | 説明 |
|---|---|
| repeat-x | 横方向のみリピートします。 |
| repeat-y | 縦方向のみリピートします。 |
| repeat | リピートします。 |
| no-repeat | リピートしません。 |
| space | リピートします。画像サイズが表示領域の整数倍でない場合は、画像間にスペースを入れて調整します。 |
| round | リピートします。画像サイズが表示領域の整数倍でない場合は、画像を拡大・縮小して調整します。 |
repeat, no-repeat, space, round をひとつのみ記述した場合は、横方向、縦方向双方に適用されます。ふたつ記述した場合は、横方向、縦方向の順に適用されます。
background-repeat: no-repeat; /* 横:no-repeat、縦:no-repeat */ background-repeat: repeat no-repeat; /* 横:repeat、縦:no-repeat */
.test-repeat {
background-repeat: repeat;
background-image: url(./image/back.gif);
width: 85px;
height: 85px;
border: 1px solid gray;
}
.test-repeat-x {
background-repeat: repeat-x;
background-image: url(./image/back.gif);
width: 85px;
height: 85px;
border: 1px solid gray;
}
.test-repeat-y {
background-repeat: repeat-y;
background-image: url(./image/back.gif);
width: 85px;
height: 85px;
border: 1px solid gray;
}
.test-no-repeat {
background-repeat: no-repeat;
background-image: url(./image/back.gif);
width: 85px;
height: 85px;
border: 1px solid gray;
}
.test-space {
background-repeat: space;
background-image: url(./image/back.gif);
width: 85px;
height: 85px;
border: 1px solid gray;
}
.test-round {
background-repeat: round;
background-image: url(./image/back.gif);
width: 85px;
height: 85px;
border: 1px solid gray;
}
<h5>repeat</h5> <div class="test-repeat"></div> <h5>repeat-x</h5> <div class="test-repeat-x"></div> <h5>repeat-y</h5> <div class="test-repeat-y"></div> <h5>no-repeat</h5> <div class="test-no-repeat"></div> <h5>space</h5> <div class="test-space"></div> <h5>round</h5> <div class="test-round"></div>