background-repeat

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

値

repeat
repeat-x
repeat-y
no-repeat
inherit

初期値

repaet

適用対象

すべての要素

継承

しない

メディア

visual

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

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

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

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

Windows版Internet Explorer: ○
Firefox: ○
Opera: ○
Safari: ○
Macintosh版Internet Explorer 5: ○

サンプル

記述例

.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 ;
}

表示例

現在位置

W3G
CSS
色と背景
background-repeat

ナビゲーション

World Wide Web Guide

ステータス情報

作者: 上田遼
公開: 2007-02-02T16:02:05+09:00
更新: 2008-12-29T04:30:36+09:00
URI: http://w3g.jp/css/color_background/background-repeat

検索

直近の制作実績等：大阪人間科学大学 New! / 大阪薫英女子短期大学 New! / セキスイハイムみんなのお国じまん New!