Image positioning different between Chrome and Firefox

Question

I have two images that I want to be positioned directly on top of each other. This HTML is generated by a script every so often so I have included the CSS directly within the HTML itself.

<div style="text-align:center">
<img id="background" 
style="position: absolute; z-index: 1; " 
src="background.png"/>
<img id="foreground" 
style="position: relative; z-index: 10; " 
src="foreground.png" border="0" usemap="#map"/>
</div>

It works perfectly, except in Chrome. In firefox and Internet explorer it works 100% of the time, I can sit and hit refresh and it is fine. In Chrome sometimes on page load or refresh the background image appears to be shifted 50% to the right? I just did a quick test and 5/10 times (half of the time) it would appear shifted to the right on a refresh. Does anyone have any ideas what could be causing this?

Answer 1

Assuming that your foreground and background images are the same size, it seems as if you are trying to do this:

<img id="foreground" style="margin-left:auto; margin-right:auto; background:url(&quot;background.png&quot;);" src="foreground.png" usemap="#map"/>

The margin-left:auto; margin-right:auto; margin-left:auto; margin-right:auto; will center the image within its parent element.