Distorted when resizing browser window

Hi – can anyone help me with this? I have added a large background image to the center behind the slider and a repeating pattern as the main background. In addition to this I have a header image and the footer as a solid colour.

Everything looks fine until I resize my browser window – when I do this the central image is cut and the footer and header no longer go all the way to the right edge (seem aligned to the left and stop half way when you scroll accross. Because the slider background blends into the main background, it looks weird when this is cut smaller but the main background remains. How do you keep it at a contant size (showing full background image and headers and footers to the edge) when you view in a smaller window?

Thanks.