You will need to be viewing this page in IE7 or less to see the problem in action. Depending on what size your screen is open at you may not immediately see the problem. Try resizing the window smaller (or larger) and you will see that a gap appears at the side of the heading revealing the background beneath. This is undesirable and will spoil the look of your layout.
The hypothesis is that when you place an image on the body background and you centre it the browser has to work out exactly how many pixels left and right to move the element so that it is centred. On odd pixel widths where the number of pixels isn't exactly divisible by 2 the browser has to round up or down to arrive at its measurement and IE seems to round the elements placed on the body at a different rate to those placed on other elements.
So when you make the window width smaller (or larger) the background on the body jogs in and out as it gets rounded up/down. This makes the image on the body go out of sync with the rest of the page. Most browsers have problems in rounding percentages but ie's background image problem is the most noticable.
Adding a 1px left padding offsets the rounding bug and seems to keep it all correct.
As IE is the only browser to have this problem I see no reason to bother other browsers with code they do not need. However if you don't like hacks then just add the padding to the body element without the hack.
Because IE7 also needs this hack then the easiest way is to use conditional comments to pass the values to all ie.
Here is the page with the left padding added so you can see the effect. Try resizing the browser to make sure it works.
However it isn't always fullproof and the image size sometimes needs to be adjusted also. If none of the above work then the best way is to place the background image on a 100% high container and not on the body and then there are no problems with alignment.
Back to Sitepoint FAQ