background-repeat
Updated / Published
background-repeatプロパティは background-imageプロパティで背景画像を表示する場合に、その背景画像の繰り返しパターンを設定します。通常、背景画像は背景領域に合わせてタイル状に縦横に繰り返し表示されますが、background-repeatプロパティは指定された画像1枚を単独で表示するなど、その表示方法を指定することができます。
- 値
repeatrepeat-xrepeat-yno-repeatinherit
- 初期値
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 ;
}