Menu
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.
787
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/
172
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
