background-repeat
background-repeatプロパティは背景画像の繰り返し方法を設定できるプロパティです。
指定できる値は次のものです。
repeat | X方向、Y方向に繰り返しを行う |
---|---|
repeat-x | X方向に繰り返しを行う |
repeat-y | Y方向に繰り返しを行う |
no-repeat | 繰り返しを行わない |
space | 各画像が見きれないように間にスペースを入れてX方向、Y方向に繰り返しを行う。 |
round | 各画像が見きれないように間に画像を縮小させてX方向、Y方向に繰り返しを行う。 |
.target{
background-repeat:repeat;
}
spaceとroundはCSS3で追加されたプロパティでブラウザにより実装状況が異なります。
2014年1月時点では、
Google Chrome31ではroundには対応しているもののspaceは非対応でrepeatとして扱われます。
Safari 7ではround、space共に非対応でno-repeatとして扱われます。
Firefox 26ではround、space共に非対応でrepeatとして扱われます。
IEは9よりround、space共に対応しています。
background-repeatのspaceとround – Sample
また、複数の背景画像に指定したい場合は,(カンマ)区切りで指定を行ないます。
(ただし、この記述はIE8以下ではサポートされていません)
.target{
background-repeat:repeat,space;
}
参考URL
3.4. Tiling Images: the ‘background-repeat’ property - W3C
登録日 : 2014年01月06日 最終更新日 : 2014年1月7日