background-repeat

background-repeatプロパティは background-imageプロパティで背景画像を表示する場合に、その背景画像の繰り返しパターンを設定します。通常、背景画像は背景領域に合わせてタイル状に縦横に繰り返し表示されますが、background-repeatプロパティは指定された画像1枚を単独で表示するなど、その表示方法を指定することができます。

  • repeat
  • repeat-x
  • repeat-y
  • no-repeat
  • inherit
初期値
repaet
適用対象
すべての要素
継承
しない
メディア
visual

background-repeatプロパティのキーワード

繰り返しパターンをコントロールするキーワードに次の4つがあります。

repeat
縦方向・横方向に繰り返し表示(初期値)
repeat-x
横方向にのみ繰り返し表示
repeat-y
縦方向にのみ繰り返し表示
no-repeat
繰り返さない(指定された画像1枚を単独で表示)

background-repeatプロパティは背景画像を表示する background-imageプロパティとセットで使います。背景画像の設定がなければ、指定しても効果はありません。

background-repeatプロパティの実装状況

IE
Firefox
Opera
Chrome
Safari
iOS
Android

サンプル

.repeat {
background-image : url(image.gif) ;
background-repeat : repeat ;
}
.repeat-x {
background-image : url(image.gif) ;
background-repeat : repeat-x ;
}
.repeat-y {
background-image : url(image.gif) ;
background-repeat : repeat-y ;
}
.no-repeat {
background-image : url(image.gif) ;
background-repeat : no-repeat ;
}
Updated / Published