Resize Background Image according to browser height

Question

How does one accomplish a hero-unit similar to this: http://tribalmedia.co.uk/

I'm curious more than anything as to how this was created. As far I can tell it's more than likely some JS that's applying a min-height percentage value to the class depending on browser height.

EDIT: Try resizing your browser height and you'll see the min-height property is being changed.

Any input would be greatly appreciated!

Answer 1

Just read the CSS:

.site-header {
    background-position: center bottom;
    background-repeat: no-repeat;
    background-size: cover;
    color: #FFF;
    min-height: 618px;
    position: relative;
}

Demo: http://jsfiddle.net/qwertynl/5a343/

Answer 2

it's just the css stuff.Following is the CSS used by the particular website.

.site-header { background-position: center bottom; background-repeat: no-repeat; background-size: cover; color: #FFFFFF; min-height: 618px; position: relative; }

Answer 3

I was able to solve my question using this Javascript!

function resizeHero() {
    var windowHeight = $(window).height(),
    heroUnit = $(".hero-unit");
    heroUnit.css({
        minHeight: windowHeight
    });
}

$(document).ready(function() {
    resizeHero();
    $(window).on("resize", resizeHero);
});