Double background image not going all the way down

[matthewamzn]

I have two background images. The very back is a gradient. The next image is behind my content. The problem is when I scroll down the page the content image isn't showing. I think the problem is the height being 100%. Is there another way of doing this?

html {
background: #f3f3f1 url(images/background_gradient.png) repeat-x;
height: 100%;
}

body {
margin: 0;
background: url(images/background_content.gif) repeat-y center;
height: 100%;
}

[CSS_Kidd]

What works for me is this:

body {
min-height:100%;
position:relative;
margin: 0;
background: url(images/background_content.gif) repeat-y center;
}

Leave out height:100%

That's just telling it to be the height of the viewing window and then stop... so when you scroll it breaks. with min-height:100%, you are telling to to be at the very least that.