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

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 2

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 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 English about where I also explain how the browser positioned your picture: check it out here.

Answer 4

I was able to resolve this with jQuery:

$(document).ready(function(){
 $('body').css({
  'margin-left': $(document).width()%2
 });
});

Answer 5

I had the same problem.

To get the background centered, you need to have a background-image wider than the viewport. Try to use a background 2500px wide. It will force the browser to center the part of image that is viewable.

Let me know if it works for you.

Answer 6

What about creating a wrapper div with the same background-image.

body{ background: url(your-image.jpg) no-repeat center top; }
#wrapper{ background: url(your-image.jpg) no-repeat center top; margin: 0 auto; width: 984px; }

The wrapper has an even number, the background will keep the same position on any screen size.