Geek Answers Handbook

Background center with chrome (error)

I have a background image centered that Chrome displays an offset of 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 assume this is due to the way different browsers handle the center -or 50% - background property in CSS:

enter image description here

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

+7
source share
7 answers

For me, this did the trick:

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

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

+3
source

If you can display the image more widely than the browser window, this should fix it.

If a solution is found here - http://philfreo.com/blog/fixing-safaris-1px-background-image-centering-problem/

+5
source

If you make the background image width an odd number (987px), the positioning will be consistent in all browsers. This seems counter-intuitive, but it seems to always fix the issue for me without CSS hackers.

+1
source

Is the image actually 986px? The easiest way to find this is to make sure the image width is an even number.

Another thing you can do is add a 2px buffer (to keep the width of an even number) in the background image to account for this shift. It should not move your image when viewed in a browser while you add px in each direction to save all this.

0
source

Try resizing the browser to see how it works ... we are talking about pixels here, and if the window has a uniform width, this is normal, otherwise the pixel should be lost somewhere, I think.

0
source

I suppose the backgroud image also has a width of 986 pixels? Then this effect should also be visible on the left side, although it turned around.

I suggest removing the background image from the container and adding it to the header:

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

I used the following CSS bit to fix the problem on webkit. If JS is not enabled, it works under the assumption that the browser is likely to be full-screen, so the width of the viewport 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); });
0
source

More articles:


All Articles