CSS min-height is fighting background-position

Question

For the problematic behavior, try resizing the window of this web app. Thought the header and boxes stop being resized after a minimum dimension, the background image continues to position itself at the center of the page, which looks really stupid.

Here's the relevant code for the background image:

body{
  text-align: center;
  min-width:1000px;
  min-height: 600px;
  background: url(../images/road_newtry_tile4.jpg) 50% 50% fixed;   
}

Even though background-position isn't nixing the min-width and height (ie, the window will stop resizing after predetermined dimensions, it continues to center the background image.

Why is it doing this? How can I prevent the image from re-centering after certain a certain point?

Answer 1

it is doing it because the 50% is relative to the size of the browser window. A fix would be to instead have the background image on a wrapper div, which has the min-width and min-height set.