I have a background image centered that Chrome displays offset by one pixel.

CSS

#container { 
    background: url("images/header.jpg") no-repeat scroll 50% transparent;
    width: 100%
}
#header {
    width: 986px;
    margin: 100px auto 0 auto;
}

HTML

<html>
<body>
    <div id="container">
        <div id="header">centered content</div>
    </div>
</body>
</html>

I guess it has to do with how different browsers handle the center -or 50%- property of the background in CSS:

enter image description here

Is there a known (simple) hack or alternative method to fix this? Background container has to be 100% wide.

css google-chrome safari background-image
Edit
Report