Keep Background Image centered when resizing browser window

Question

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:

https://i.sstatic.net/uz3yT.png

Answer 1

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;
}​

Answer 2

Your code seems about right.

Only thing I did was consolidate background-position into the same background attribute up top like so:

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

Here's a JFiddle of it - JFiddle Link