CSS - content overflowing background image

Question

I have a center background image on my body tag. When my site is maximized everything looks find but as a start to make my browser window smaller and a a scroll bar appears on the bottom, when I scroll the content overflows the background image. I have tried to do everything to keep the image centered no matter what but it doesnt seem to work. Anyone have any idea? My CSS for the background image is this:

body {
        background: #EDEDED url(../images/bg-y.png) repeat-y center; 
        font-family:'Lucida Grande', 'Lucida Sans Unicode', Tahoma, Arial, san-serif;
        color:#000000;
}

I have an example live site up at http://www.theprizeshark.com so you can see what it is doing. Just make the browser window small and then scroll to the right and you will see that the content is overflowing. Thanks for any help!

Answer 1

Seems like adding background-attachment: fixed to the body tag took care of the problem. Since you're using the shorthand, you'd be able to just add fixed in your background declaration.

Answer 2

Make wrapper for your wrapper and put your background there.

<div style="[bg image width]; margin:auto; background:url([bg image url]) repeat-y;">
    <div id="wrapper">
    </div>
</div>