ウェブランサー

background-repeat - 背景画像の繰り返しを指定する

対応ブラウザ
IE7対応IE8対応Firefox対応Chrome対応Opera対応Safari対応
適用対象 全ての要素
継承 しない

background-repeatプロパティは、背景画像の繰り返しを指定する事ができます。横方向・縦方向に限って繰り返す、繰り返さないを制御したいときに使用します。

background-repeatに与えられる値

background-repeat: repeat;
縦横ともに、背景画像を繰り返して表示します。初期値です。
background-repeat: repeat-x;
横方向のみ繰り返して表示します。
background-repeat: repeat-y;
縦方向のみ繰り返して表示します。
background-repeat: no-repeat;
背景画像を一回だけ表示してリピートはしません。

background-repeatの使用サンプル

CSS
.bg_sample01 {
 width: 200px;
 height: 100px;
 border: 1px solid #666666;
 background-color: #DDDFFF;
 background-image: url(images/sample_bg_stripe.png);
 background-repeat: repeat-x;
 padding: 5px;
}
.bg_sample02 {
 width: 200px;
 height: 100px;
 border: 1px solid #666666;
 background-color: #DDDFFF;
 background-image: url(images/sample_bg_stripe.png);
 background-repeat: repeat-y;
 padding: 5px;
}
XHTML
<div class="bg_sample01">[bg_sample01]</div>
<div class="bg_sample02">[bg_sample02]</div>
表示確認
[bg_sample01]
[bg_sample02]

background-repeatに関連するCSSプロパティ

背景(バックグラウンド)
background 背景に関する指定をまとめて行う
background-attachment 背景画像の固定・移動を指定する
background-break インライン要素の背景画像の繰り返し方法を指定する
background-clip 背景の描画範囲を指定する
background-color 背景色を指定する
background-image 背景画像を指定する
background-origin 背景の描画する際の基準となるボックスを指定する
background-position 背景画像の表示開始位置を指定する
background-repeat 背景画像の繰り返しを指定する
background-size 背景画像を表示するサイズ(大きさ)を指定する