2

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/

Matthew
  • 2,158
  • 7
  • 30
  • 52

1 Answers1

1

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

Updated Example

html, body {
    height:100%;
}
Josh Crozier
  • 233,099
  • 56
  • 391
  • 304
  • Thanks, Josh! That's a great solution. I'll be sure to include that in my CSS reset for the future. ;) – Matthew May 12 '14 at 22:49