background-repeat の概要
CSSプロパティ「background-repeat」は、背景画像の描画における繰り返しを設定します。背景画像をX軸（横方向）とY軸（縦方向）に対してそれぞれ繰り返すように描画されるかどうかを設定できます。
<div class="box"></div>
<style>
.box{
height:300px;
background-image:url(https://www-creators.com/wp-content/uploads/2017/10/kitty.png);
background-repeat:repeat no-repeat;
background-size:100px 100px;
}
</style>縦と横方向の設定
スペースで区切ることで、X軸、Y軸をそれぞれ設定する必要がありますが、下記のショートハンドを利用して、それぞれに同じ値を設定できます。
| ショートハンド | 実際の設定値 |
|---|---|
| repeat-x | repeat no-repeat |
| repeat-y | no-repeat repeat |
| repeat | repeat repeat |
| space | space space |
| round | round round |
| no-repeat | no-repeat no-repeat |
値と解説
| 値 | 解説 |
|---|---|
| repeat | 背景画像は、要素の背景描画領域を満たすように繰り返し描画されます。要素にフィットせずはみ出る場合は切り落とされます。 |
| space | 背景画像同士の間にスペースを開けて、繰り返し描画します。要素にフィットするようにスペースの幅が自動計算され、切り落としを行いません。 |
| round | 背景画像同士の間にスペースを残さないように背景画像を引き伸ばしながら、繰り返し描画します。要素内にちょうどフィットするように引き伸ばし幅が自動計算され、背景画像の切り落としを行いません。 |
| no-repeat | 背景画像は一切繰り返しを行いません。 |