Div full height and width dynamic

Question

Right now I try to make a div with a background image in it that fills the whole viewport on pageload and pushes all the other page-content down if needed, so that you just see this div with the image when you load the page - what's the best way to get this working?

Answer 1

Demo Fiddle

This should do it:

html, body{
  height:100%;
  width:100%;
  margin:0;
  padding:0;
  position:relative;
}
#imgDiv{
  position:relative;
  height:100%;
  background-image:url(myImage.png);
}

You need to set the height of the div to 100%, but this needs to be relative to 'something' which is why you also set height:100% for the html and body elements. As long as the div with the image appears first in your HTML, it will work as anticipated.