Site BG being cut off on resize, what?

[Prismatic]

Designing my first (mostly) CSS site and i've run into an issue

 

I've got a div that acts as the "base" for the site

 

#Body {
width: 880px;
height: 100%;
margin: 0 auto;
padding: 0px 15px 0px 15px;
background-image: url("images/CapsuleBack.jpg");
background-repeat: repeat-y;
text-align: left;
}

 

Now, This works great, I have my background showing right (CapsuleBack.jpg is the background for it, my way of fauxing two side bars for the site, all the content I push in 15px on either side, that's nothing to do with my problem though)

 

Say you load the site, the background goes from the top of the browser to the bottom. Now, shrink your browser vertically, and then scroll down, suddenly, the background is chopped off where the bottom of the browser window was! See the attached photo to see what I mean. I hope you can help, because i'm stumped

 

 

 

[attachment deleted by admin]

[bronzemonkey]

It's because you're using {height:100%} - remove that line.