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

With the code you posted, the background image will always be centered on screen. On small screens, you want the houses to be center-screen; but this can only happen if the houses are in the center of the image. So my recommendation, if possible, would be to have the same amount of green grass on each side of the image, so that the houses are in the center of the image. Then you won't run into this problem.

If you can't change the image and the center of the houses is, say, 240px to the left of center of the image, you could center the houses on screen with something like this:

body {
    background: url(bg.png) calc(50% + 240px) 0 no-repeat;
}

Or perhaps you could just use that inside @media rules for smaller screens if you don't want the image to look off center on wider screens.