Background center with chrome (bug)

Question

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

CSS

#container { 
    background: url(\"images/header.jpg\"         


        

Answer 1

I used the following bit of CSS to fix the problem on webkit. If JS isn't enabled, it works on the assumption that the browser will probably be full screen, so the viewport width on webkit will be an odd number

CSS

@media screen and (-webkit-min-device-pixel-ratio:0) { 
    html {
        margin-left: 1px;
    }
    html.evenWidth {
        margin-left: 0px;
    }
}

JavaScript (jquery)

$(document).ready(function {
var oWindow = $(window),
htmlEl = $('html');

function window_width() {
    if(oWindow.width() % 2 == 0) {
        htmlEl.addClass('evenWidth');
    } else {
        htmlEl.removeClass('evenWidth');
    }
}

$(document).ready(function(){
    window_width();
    $(window).resize(window_width);
});