100% Height Not Working As Expected

In my html, there're a couple of divs. but none of these is showing the background image. and, of course that's because 100% property is not working. why is this happening? HTML &l

Solution 1:

100% of what?

You need to define the parent's dimensions in order for this to work, otherwise 100% of 0, is also 0%.

In this example, since the parent element is body, you would have to set both the height of that and html to 100%. Doing this, will allow for the child element to have a height of 100%.

body, html {
    height: 100%;
}

jsFiddle example - it works.

Solution 2:

Your div.section needs to be relative to another div in order for the height: 100% to work.