Resizing window hides background due to margin-left:auto; and margin-right:auto;

So my layout is pretty standard--it has a background and then the main content area which is housed in #page-wrapper. The problem is, when I resize the window of my site to be smaller than the main content, the scrollbars only go to the right and left edges of #page-wrapper, which makes it feel kinda cramped. And people on smaller resolutions wouldn't be able to see the background at all. Basically, you can't see the background on the right or left if you make the window too small.

I believe this is an issue with margin 50px auto; as no matter how I resize it, the background spacing at the top and bottom always shows those 50px. Is there anyway to allow for some of the background to be seen on the side for smaller window sizes while keeping the layout centered?

Not sure if I did a good job of describing this, but you can play around with my test site if that helps any: http://star-bottle.net/testae/

This should be a relatively simple fix, but I can't quite figure it out. And sorry if this has been answered, but I couldn't find it...
Thanks for any and all help :)