Firefoxで背景画像の位置がずれる現象

htmlタグやbodyタグに背景画像をセンターに指定した場合に、背景画像の幅よりウィンドウの幅を縮めると背景画像がずれて表示されてしまいます。
この問題を解決する方法は、以下の通り。

bodyタグに背景画像をセンターに指定

黒枠で囲んである部分が、bodyタグに背景画像をセンターに指定したもの。
ずれてしまう問題をわかり易くするために、1から5と数字を振ってあります。

ウィンドウ幅を背景画像幅より短く表示させたのが、下図。
背景画像の1と記した部分が表示されず、ウィンドウの左端には2と表示された部分になってしまっています。

※背景に使用した画像に左から「12345」と数字を振ってあります。
※コンテンツ部分に背景指定はしていません。

対処方法

この現象は、全てのソースを括るdivタグ(idによくwrapperやcontainerと名づける部分)を挿入して、背景画像をセンターに指定することで解消します。

ウィンドウ幅を狭くしても、左端には1で示された背景画像が表示されていることを確認してください。

ちなみにIE6,7,8ではhtmlタグかbodyタグに同様の背景設定をしても左基準の正常な表示になります。

2011/05/13 15:42