How do you avoid viewport collapse of a centered background image?

I am using a layout where I have a centered title/logo image at the top and it connects with the background image which is being repeated vertically.

The problem is that the background only stays centered as long as the viewport is sufficiently wide enough. When I decrease its width below the width of the background image, the background image is no longer centered a开发者_运维百科nd is just drawn starting from the left so it no longer connects to the logo image.

I drew that picture just for your personal amusement.

is what you mean like this http://jsfiddle.net/yuliantoadi/FZAMX/ ?

Set min-width on body to be at least equal to your image with borders. In this test case that is 642px;

Have you tried setting min-width on html to be the min-width of the image? I tried that on your first link in Chrome and it seemed to work. I set min-width to 680px.

I ended up not using a body background-image after all, making a 100% min-height div which always extends to the bottom is much easier. Here's what I came up with: http://213.251.177.42/misc/background-problem/container.html