Trouble expanding image for 100% of browser height with CSS [duplicate]

Question

This question already has answers here:

Make body have 100% of the browser height (25 answers)

Closed 9 years ago.

I want to expand the hero image for 100% of the browser HEIGHT.

This is what I have:

.home-splash {
    position: relative;
    display: table;
    width: 100%;
    height: 100%;
    background: url("http://www.matthewkosloski.me/hero-3a.jpg") center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -ms-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

With this code, the hero image (or splash image) only expands to the height of the header. However, this problem can be avoided (somewhat) by using width: 100vh;. I don't like that because on mobile devices, the height of the hero image is really large... like 5000px in height. I just want it to expand the EXACT height of the browser.

Here is the jsFiddle :: http://jsfiddle.net/E7rDG/

Answer 1

You need to set the height of the html/body elements to 100%.

Updated Example

html, body {
    height:100%;
}