CODEWITHSUNDEEP
htmlcss
Daniel
Daniel

Reputation: 820

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

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!

Upvotes: 3

Views: 6216

Answers (1)

sachleen
sachleen

Reputation: 31121

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.

Upvotes: 7

Related Questions