Absolutely true centred background image

Question

oI have a site where a centred background image plays a vital part in a homepage animation.

The background centres great until the browser window cannot fit in the width

Answer 1

Set the background left to 50% and the background margin-left to be 0 minus the width of the background. That way it will always show the horizontal center of the image in the horizontal center of the browser window.

See my JSbin demo here. I reused your image so it looks weird with the other example images below!

CSS:

body {
  line-height:1;
padding:0px;
  margin-left:-575px; /* half your background image width */
  background:#90a830 url(http://www.apb-media.co.uk/uploads/background.jpg) 50% top;
}