Home/ Questions/Q 6125263
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-23T16:13:39+00:00

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

  • 0

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.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    For me, this did the trick:

    @media screen and (-webkit-min-device-pixel-ratio:0) { 

html {
    margin-left: 1px;
}

}

    I will post the link for this solution as soon as I find were I got it from a few days ago.
    In the same post, the guy said the problem was with odd or even number for container width.
    Anyway, this fixed the problem in my case.

    • 0