CSSリファレンス

実践向けCSSリファレンス

背景画像の繰り返しを設定するCSSプロパティ background-repeat

background-repeat の概要

CSSプロパティ「background-repeat」は、背景画像の描画における繰り返しを設定します。背景画像をX軸(横方向)とY軸(縦方向)に対してそれぞれ繰り返すように描画されるかどうかを設定できます。

<div class="box"></div>
<style>
.box{
  height:300px;
  background-image:url(http://www-creators.com/wp-content/uploads/2017/10/kitty.png);
  background-repeat:repeat no-repeat;
  background-size:100px 100px;
}
</style>

縦と横方向の設定

スペースで区切ることで、X軸、Y軸をそれぞれ設定する必要がありますが、下記のショートハンドを利用して、それぞれに同じ値を設定できます。

ショートハンド実際の設定値
repeat-xrepeat no-repeat
repeat-yno-repeat repeat
repeatrepeat repeat
spacespace space
roundround round
no-repeatno-repeat no-repeat

値と解説

解説
repeat背景画像は、要素の背景描画領域を満たすように繰り返し描画されます。要素にフィットせずはみ出る場合は切り落とされます。
space背景画像同士の間にスペースを開けて、繰り返し描画します。要素にフィットするようにスペースの幅が自動計算され、切り落としを行いません。
round背景画像同士の間にスペースを残さないように背景画像を引き伸ばしながら、繰り返し描画します。要素内にちょうどフィットするように引き伸ばし幅が自動計算され、背景画像の切り落としを行いません。
no-repeat背景画像は一切繰り返しを行いません。

仕様書

関連CSSプロパティ

閉じる