cssで背景画像の繰り返し方法を指定する

cssで下記のように背景画像を指定したとき、デフォルトでは同じ画像が繰り返し表示されてしまいます。

background-image: url(http://example.com/img.jpg);

繰り返しをコントロールするためにはbackground-repeatを用いて下記のように繰り返しの方法を指定することにより、望みどおりの表示結果が得られます。

繰り返しをせずに画像を1回だけ表示

background-repeat:no-repeat;

横方向に繰り返し

background-repeat:repeat-x;

縦方向に繰り返し

background-repeat:repeat-y;

なお、環境によっては上記のcssの設定が反映されない場合もありますので、繰り返し設定のcssであるbackground-repeatは画像を表示するcssスクリプトの前に置くようにしましょう。

——————————————
/* sample */
#img {
background-repeat:no-repeat;
background-image: url(http://example.com/img.jpg);
}
——————————————

【参考サイト】

背景に画像【background-image】：CSS入門

背景に画像【background-image】：CSS入門