Make a <DIV> occupy all VISIBLE height screen, with content below it

Question

My client wants a big image showing on the homepage of her site, BUT she wants that ONLY the image be visible when the page loads. All the rest of the page should be below this image and viewable only if the page is scrolled. When the page first loads, the visitor should only see the big image, no matter what monitor size or resolution he/she uses.

Something like this:

Screen boundary ->----------------- |
                  IMG               |
                  IMG               |
                  IMG               |
                  IMG               |
                  IMG               |
Screen boundary ->----------------- |
                  Content           |
                  Content           | <- scroll bar

Is it even possible? It's a Wordpress site, if this information matters.

Thanks a lot!

Answer 1

You can do this with just CSS:

body, html {
  margin:0;
  height: 100%;
}
#foo {
  background-color:#ccc;
  height: 100%;
}

<div id="foo">hello. content goes here</div>
rest of my content<br />

DEMO

You can set a background image on the div and play with the various background-size properties to make it look however you want.