背景が指定した位置から繰り返さない

たとえば背景に画像を配置したい場合があると思う。

また指定した位置（ここでは上から600pxの位置）で縦方向に繰り返したい場合、以下のようにしていた。

#container{

background:url(img/test.jpg) repeat-y 0 600px;

float:right;

width:500px;

}

一見問題がないように見えるが、背景の位置が600pxではなく0pxからはじまってしまう。

これがなかなかほかの要素と絡まってくると解決に時間がかかったのでメモしたい。

具体的に問題の箇所はfloat:right;がいわゆる浮動化することによって背景がおそらく正しく表示できないのではなかろうかと推測している。

そこでフロートしている箇所に背景をするのではなく別のボックスに指定するなどしてほかの代替案を考えよう。

たとえば

body{

background:url(img/test.jpg) repeat-y 0 600px;

}

のように。

ボディにほかの画像が指定されているなら新たなボックスを作成するなどして別の方向も考えてみればいいと思う。