background-repeat - 背景画像の繰り返し表示の設定

投稿日:2016/02/22 / 更新日:2016/02/22

スタイルシートのbackground-repeatは、背景画像の、タイルの繰り返し表示を調整するためのプロパティです。タイルとは、画像1つということを表す単位です。

サンプルコード

下記は、background-repeatを用いて背景画像のタイルの繰り返し表示を横方向のみに限定するためのサンプルコードです。

body {
	background-repeat: repeat-x ;
}

スタイルシートのbackground-repeatを指定した例です。通常、指定した背景画像は繰り返し表示でドキュメント全体を埋め尽くしますが、このデモでは、横方向(repeat-y)にしか繰り返し表示されていません。

body { background-repeat: repeat-x ; background-image: url( "/character.png" ) ; }

値の指定方法は主に下記の通りです。リンクをクリックすると、デモを確認できます。

項目	説明
inherit	親要素の値を引き継ぐ。例の場合、`div`要素の`background-repeat`には、`body`に指定された値(`repeat-y`)が引き継がれる。
initial	プロパティの初期値が適用される。この場合、`repeat`(縦、横、どちらの方向にも繰り返し表示)となる。
repeat	初期値。縦方向、横方向、どちらにも繰り返し表示される。
repeat-x	横方向にのみ、タイルが繰り返し表示される。
repeat-y	縦方向にのみ、タイルが繰り返し表示される。
no-repeat	繰り返し表示されない。タイルが1つだけ表示される。

2016年7月現在の、ブラウザのサポート状況は次の通りです。全ての主要ブラウザで、ベンダープレフィクスなど気にすることなく利用できます。