Css – Keep Background Image centered when resizing browser window

background, browser, center, css, resize

So I am making layout for an SMF forum and the background image is centered perfectly when the browser window is wide enough. However when I start shrinking the browser window, the background image starts moving to the left. Here is my current CSS for the background:

body{    background: #fefff1 url(../images/img/bg.gif) no-repeat;    background-position:top center;    margin: 0 auto;     color: #7C3C4A;    padding: 0px 5%;    font: 78%/130% "Verdana", "Arial", "Helvetica", sans-serif;}

Here's a screenshot of the forums so that you can visualize it better:


Best Solution

body{    background-color: #fefff1;    background-image: url(../images/img/bg.gif);    background-position: center center; /* First value is from left and second is from top. You can use use number as well*/    background-repeat:no-repeat;}​