{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://www.manongdao.com/data/attach/logo/logo.png', '推荐 甜甜的少女心 的问题《Background center with chrome (bug)》','https://www.manongdao.com/q-491281.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
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:
Is there a known (simple) hack or alternative method to fix this? Background container has to be 100% wide.
Is the image actually 986px? The easiest way I found to fix it is to make sure the width of the image is an even number.
Another thing you could do is add a 2px buffer (to keep the width an even number) in the background image to account for that shift. It shouldn't shift your image as viewed in the browser as long as you add a px to each side to keep it all even.
For me, this did the trick:
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.
I suppose the backgroud image is also 986 pixels wide? Then this effect should also be visible on the left side, turned around though.
I suggest to remove the background image from the container and add it to the header:
Try resizing the browser to see how it works... we are talking about pixels here, and if the window has a even width it's ok, otherwise a pixel has to be lost somewhere i guess.
If you can output your image wider than the browser window, that should fix it.
If found that solution here - http://philfreo.com/blog/fixing-safaris-1px-background-image-centering-problem/
If you make the background image width an odd number (987px) the positioning will be consistent across all browsers. It seems counter-intuitive but that seems to always fix the issue for me without any CSS hacks.