最終更新日 2021年4月7日

background-repeatプロパティ

background-repeatプロパティは、background-imageで指定した背景画像の繰り返しパターンを指定します。複数の背景画像を指定してある場合は、それぞれの画像の繰り返しパターンをカンマで区切って指定できます。

CSS3での変更点

・値に、space、roundが追加されました。

初期値	適用先	継承
repeat	すべての要素	なし

値	説明
repeat-x	背景画像を水平方向に繰り返す
repeat-y	背景画像を垂直方向に繰り返す
repeat	背景画像を水平方向と垂直方向に繰り返す（初期値）
space	背景画像は指定方向へ繰り返して配置されるが、最初の画像と最後の画像が領域の端に置かれ、スペースによって調整される
round	背景画像は指定方向へ繰り返して配置されるが、最初の画像と最後の画像が領域の端に置かれ、画像の伸縮によって調整される
no-repeat	背景画像を繰り返さない

サンプルコード

background-repeat: repeat-x;
background-repeat: repeat-y;
background-repeat: repeat;
background-repeat: space;
background-repeat: round;
background-repeat: no-repeat;

参考文献：CSS Backgrounds and Borders Module Level 3

当サイトの活動をサポートしてみませんか？気軽にクリエイターの支援ができます。