CODEWITHSUNDEEP
jquerycssheightviewport
MarcL
MarcL

Reputation: 83

Div full height and width dynamic

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?

Upvotes: 0

Views: 72

Answers (1)

SW4
SW4

Reputation: 71170

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.

Upvotes: 1

Related Questions