background-repeatで背景画像の繰り返しを指定【CSS】

background-repeatは背景画像の繰り返しを指定するプロパティです。

ちなみに背景画像はbackground-imageプロパティで指定できます。

関連記事
『background-imageで背景画像を指定する【CSS】』

background-repeatの値の指定方法

background-repeatプロパティでは、背景画像の繰り返しを指定する値は1つ、または半角スペースで区切って2つ指定できます。

値を1つ指定する場合は、水平方向と垂直方向がその値によって指定され、値を2つ指定する場合は、水平方向・垂直方向という順番で指定されることになります。

background-repeatプロパティで指定できる値には以下のようなものがあります。

no-repeat

no-repeatを指定すると、背景画像は繰り返されません。

repeat

repeatを指定すると、背景画像は繰り返して表示され、領域からはみ出る部分は切り取られます。

space

spaceを指定すると、背景画像は繰り返して表示され、領域からはみ出ないように間隔が調整されて配置されます、

round

roundを指定すると、背景画像は繰り返して表示され、領域内に収まるように自動的に拡大・縮小されます。

repeat-x

repeat-xを指定すると、背景画像は水平方向にのみ繰り返して表示されます。

水平方向にrepeat、垂直方向にno-repeatを指定した場合と同じです。

repeat-y

repeat-yを指定すると、背景画像は垂直方向にのみ繰り返して表示されます。

水平方向にno-repeat、垂直方向にrepeatを指定した場合と同じです。