【CSS】background-repeat - 背景画像のリピート
CSSのbackground-repeatプロパティについてご紹介します。
background-repeat
background-repeatは背景画像のリピート（繰り返し）を示すプロパティです。
基本構文
background-repeat: x軸値 y軸値;値
一般的な値は次の通りです。
| 値 | 意味 |
|---|---|
| repeat | 繰り返す。
幅が足りない画像は切り取ります。 |
| no-repeat | 繰り返さない。 |
| repeat-x | x軸（横）に繰り返す。
幅が足りない画像は切り取ります。 |
| repeat-y | y軸（縦）に繰り返す。
幅が足りない画像は切り取ります。 |
| space | 要素のサイズに収まる限り繰り返す。
スペースは均等に配置します。 |
| round | 繰り返す。
幅が不足する場合、画像を拡大・縮小してスペースに納めます。 |
サンプル
repeat
<style>
div {
width: 250px;
height: 250px;
background-image: url('https://it-hack.net/storage/app/media/image/app-programing%40100x66.jpg');
background-repeat: repeat;
}
</style>
<div></div>no-repeat
<style>
div {
width: 250px;
height: 250px;
background-image: url('https://it-hack.net/storage/app/media/image/app-programing%40100x66.jpg');
background-repeat: no-repeat;
}
</style>
<div></div>repeat-x
<style>
div {
width: 250px;
height: 250px;
background-image: url('https://it-hack.net/storage/app/media/image/app-programing%40100x66.jpg');
background-repeat: repeat-x;
}
</style>
<div></div>repeat-y
<style>
div {
width: 250px;
height: 250px;
background-image: url('https://it-hack.net/storage/app/media/image/app-programing%40100x66.jpg');
background-repeat: repeat-y;
}
</style>
<div></div>space
<style>
div {
width: 250px;
height: 250px;
background-image: url('https://it-hack.net/storage/app/media/image/app-programing%40100x66.jpg');
background-repeat: space;
}
</style>
<div></div>round
<style>
div {
width: 250px;
height: 250px;
background-image: url('https://it-hack.net/storage/app/media/image/app-programing%40100x66.jpg');
background-repeat: round;
}
</style>
<div></div>
