CSS3: background-repeat プロパティ - 背景画像の繰り返し方法

■ 概要

項　　目説　　明
記述形式
  1. セレクタ {background-repeat: 値 }
  2. セレクタ {background-repeat: 値1　値2 }
値 の形式
  1. 値: repeat-x，repeat-y，repeat，space，round，no-repeat
  2. 値1，値2: repeat，space，round，no-repeat
初 期 値 repeat
対応ブラウザー H3+ / e6+ / N2+ / Fx1+ / Op6+ / Ch1+ / Sa1+
適用可能な要素 すべての要素
継　　承 しない

■ 解説

background-repeat プロパティ は，背景画像の繰り返し方法 を指定します。

値 の１つのみを指定した場合は，この指定を縦横両方向に適用します。 　また，値1，値2 の２つの値を指定した場合は， 値1 が横方向，値2 が縦方向の指定となります。

指定できる値の形式は，以下のとおりです。

値説　　明
repeat-x 横方向にのみ背景画像を繰り返して表示します。
repeat-y 縦方向にのみ背景画像を繰り返して表示します。
repeat 背景画像を繰り返してタイルのように表示します。 （初期値）
space 背景配置ボックス に画像が完全に収まる最大回数だけ背景画像を繰り返して，最初と最後の背景画像がボックス境界に接するように等間隔に間を空けて配置します。
ただし，背景の描画領域の方が配置ボックスより大きい場合には，背景の描画領域に合わせて配置します。
round 背景配置ボックス に画像が完全に収まる最大回数だけ背景画像を繰り返して，必要であれば画像サイズを拡大して，背景配置ボックスを完全に埋めるように配置します。
ただし，背景の描画領域の方が配置ボックスより大きい場合には，背景の描画領域に合わせて配置します。
no-repeat 繰り返しは行わずに背景画像をそのまま表示します。
備　　考 背景配置ボックス とは，background-origin プロパティ で指定した背景配置の基準となるボックスのことです。

比較的小さな画像や並べて連結できる画像の場合は，繰り返しを指定しますが，大きな画像で繰り返しが不要な場合は，no-repeat を指定します。　その際には，背景画像を表示する位置は background-position プロパティにより指定します。

さらに，前景の表示内容をスクロールした際に背景画像を同時に移動するか，そのまま同じ位置に留めて移動しないかを， background-attachment プロパティにより指定できます。

■ 使用例（ background-repeat プロパティの利用）

次の例を見ると background-repeat プロパティの値と背景画像の繰り返し状態の関係がわかります。 　なお，この例の class="sample1" ～ class="sample6" では，background-repeat プロパティの値を除いて，他は全く同じ指定です。

HTMLソース
CSS
<head> ～ </head>		 
<style type="text/css" media="screen, handheld, print, tv" >
<!--
p.sample1 {width:320px; height:240px; 
           background: url(../logo.gif) left top yellow;
           background-size: 100px 100px;       
           background-repeat: repeat-x;}
p.sample2 {width:320px; height:240px; 
           background: url(../logo.gif) left top yellow;
           background-size: 100px 100px;       
           background-repeat: repeat-y;}
p.sample3 {width:320px; height:240px;
           background: url(../logo.gif) left top yellow;
           background-size: 100px 100px;       
           background-repeat: repeat;}
p.sample4 {width:320px; height:240px;
           background: url(../logo.gif) left top yellow;
           background-size: 100px 100px;       
           background-repeat: space;}
p.sample5 {width:320px; height:240px;
           background: url(../logo.gif) left top yellow;
           background-size: 100px 100px;       
           background-repeat: round;}
p.sample6 {width:320px; height:240px;
           background: url(../logo.gif) left top yellow;
           background-size: 100px 100px;       
           background-repeat: no-repeat;}
-->
</style>

ブラウザー 表示例
　↓↓↓class="sample1": repeat-x 　
　　　（横方向のみ繰り返して表示されます）


　↓↓↓class="sample2": repeat-y 　
　　　（縦方向のみ繰り返して表示されます）


　↓↓↓class="sample3": repeat　 　
　　　（縦横両方向に繰り返して表示されます）


　↓↓↓class="sample4": space 　
　　　（縦横両方向とも，すべて収まる最大個数を繰り返して等間隔にスペースを空けて表示されます）


　↓↓↓class="sample5": round 　
　　　（縦横両方向とも，すべて収まる最大個数を繰り返してスペースが空かないようにサイズ調整をします）


　↓↓↓class="sample6": no-repeat 　
　　　（背景画像の繰り返しは行わず１回だけ表示します）


なお，背景画像の表示位置は background-position や background-origin などのプロパティで指定できます。　詳細は，個々のプロパティの説明を参照してください。

■ 備考

【参考ページ】