Slide div up when scrolling down page to reveal content behind it

I'm seeking to achieve the effect on the site http://icscreative.com/#home. When you scroll up to the top of the site a div with a background image appears and covers the entire screen. Then when you scroll down, it lifts up, revealing content behind it which does not scroll its way up, but simply resides behind it.

I'm having trouble understanding how this is achieved. So far I have created a div with a relative position named .mainContent which contains my content, a couple paragraphs. I have placed a div inside of that with an absolute position named .slide which has a background image and top and left 0 so as to have it cover the entirety of the .mainContent div.

I imagine jQuery is being used, but I'm not sure how. My initial thought was parallax, but at the same time I don't want text to scroll up from the bottom of the screen, I want it to stay in place behind the .slide div. Is this purely CSS?

Thanks in advance.

Raheel K.

Edit: Here's what I have so far. The #blogHeader does display over the #blog, but when scrolling down both divs move together and the one stays over top of the other. Also, I changed the names of the selectors.

HTML

<div id="blog">

<div id="blogHeader"></div>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus lacinia ultrices commodo.   Pellentesque dictum consequat nulla, quis elementum ante ornare vel. Nunc non lacus eget diam rutrum tincidunt. Suspendisse vel turpis est. Nulla sit amet libero tellus. Etiam consequat quam rhoncus mauris cursus porta. In hac habitasse platea dictumst. Aliquam sollicitudin aliquet enim nec blandit. Vivamus faucibus, justo mattis euismod porttitor, metus tellus pulvinar velit, ac rutrum urna lorem id magna. Vestibulum diam lectus, pharetra nec pulvinar a, imperdiet at magna. Ut a pellentesque elit.</p>

</div>

CSS

#blogHeader{
    position: absolute;
    width:100%;
    height: 700px;
    background:url(media/images/image.jpg) no-repeat fixed 50% 50%; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    z-index: 1;
}

#blog{
    position: relative;
    z-index: 0;
}

Edit 2: Posting jsFiddle to give a better idea of what I'm trying to do and the problem I'm having. http://jsfiddle.net/rHg9d/