2009/01/29 22:49

ズレを修正（background-positionとbackground-repeatの関係？）

このブログの格子模様が内側と外側でずれていたので修正しました。たまたま自分のブラウザのWindowサイズがちょうど良かったから今まで気付かなかったけど・・・

あと、backgroundをrepeatするときはpositionを指定してもあまり関係ないよね？なんて勝手な思いこみをしていましたけど、違うんですよね。

left topにすると(0,0)が起点になってリピートしていくのね。で、#containerでは0 autoなんてしているから#containerは(50%,0)が起点になる感じ（いや、細かく言うと(50%-(#container width)/2, 0)か。。）。あたりまえですが、(0,0)の場合、Windowサイズで右側だけ背景がにょきにょきしていきます（背景が固定されているように見えるかも）。(50%,0)の時は、左右共ににょきにょきしていきます。(50%,0)しないと、#containerの0 autoとあわないのよねー。

もう文字で説明してもわかりにくいから、このブログで試してみてくださいよ。bodyのbackground-positionがcenter topになっている（デフォルト）のと、Firebugでleft topにしたので、ブラウザのサイズをいじいじしてみたらわかるよ。

と言うことで、bodyと#containerのbackground-positionをcenter topにしたので格子がぴったりになりましたとさ。

関係ないけど、imgのpaddingを9pxにして1px+9px+600px+9px+1px=620pxに調整。そして、duck.nuのbackgroundにfixedを加えました。Firefoxだとアレだったのをずっと放置していました。。