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日

同じカテゴリー(Background)のエントリー

検索

スポンサードリンク

バージョン

リファレンス