parallax effect using css

See more:

CSS

HTML

hey i got this awesome code from the net.they have explained all about parallax and it is working also.but i have a small problem.i have a page wrap above the images.but when i scroll down the image also gets scrolled up and i see white screen behind the page-wrap as its height is 1000px.i tried using background attachment as fixed but it is not working.
here is the html markup

<div id="background"></div>
<div id="midground"></div>
<div id="foreground"></div>
<div id="page-wrap"></div>

here is the css:

#background {
    background: url(background.png) repeat 5% 5%;
        background-attachment:fixed;
        background-position:fixed;
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 100;
}

#midground {
    background: url(midground.png) repeat 20% 20%;
    background-attachment:fixed;
    background-position:fixed;
    position: absolute;
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 100;
}

#foreground {
    background: url(foreground.png) repeat 90% 110%;
        background-attachment:fixed;
    background-position:fixed;
    position: absolute;
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 200;
}

#page-wrap {
    width: 720px;
    height:1000px;
    margin: 0 auto;
    position: relative;
    z-index: 300;
    background: rgba(0,0,0,0.7);
    overflow: hidden;
    padding: 30px 50px;

    border-left: 10px solid rgba(255,255,255,0.2);
    border-right: 10px solid rgba(255,255,255,0.2);

please help me on this..thankyou