Centered background image is off by 1px

background-image, css, html

Solution

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.

Problem

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?

Original source