Centered background image is off by 1px

Question

My web page sits in a DIV that is 960px wide, I center this DIV in the middle of the page by using the code:

html,body{background: url(images/INF_pageBg.gif) center top repeat-y #777777;text-align:center;}
#container{background-color:#ffffff;width:960px;text-align:left;margin:0 auto 0 auto;}

I need the background image of the html/body to tile down the middle of the page, which it does, however if the viewable pane in the browser is an odd number of pixels width then the centered background and centered DIV don't align together.

This is only happening in FF.

Does anybody know of a workaround?

Answer 1

I am not that good with CSS, but you could use some javascript to see if its an odd number and then resize/move if it is.

Answer 2

Yeah, it's known issue. Unfortunately you only can fix div and image width, or use script to dynamically change stye.backgroundPosition property. Another trick is to put expression to the CSS class definition.

Answer 3

The (most) common problem is that your background image has an odd number while your container is an even number. I have wrote an article in my best Engrish about where I also explain how the browser positioned your picture. I hope this will explain your question.

check out here

Answer 4

I have this exact same problem.

Funny enough, my Image is 960, and so is the div.

What was the "Script" you used to fix this problem?

Answer 5

I found that by making the background image on odd number of pixels wide, the problem goes away for Firefox.

Setting padding:0px 0px 0px 1px; fixes the problem for IE.

Carlo Capocasa, Travian Games

Answer 6

Try this solution

http://www.sohtanaka.com/web-design/1px-background-alignment-bug/