How to make a wide header background that's 100% on width and keeps aspect ratio on height?

See more:

CSS

HTML

CSS3

something like the banner video in www.cinnamontoast.ca

I was told to try background-size: cover; but this didn't work well..

I tried the following code..

<div id="header">
<div id="header-wrap">
header content
</div>
</div>

css:

#header {
background: url(background.jpg);
background-size: cover;
}

but this makes the background height limited to where the header elements end..
what I want is a header background that takes 100% on width, and whatever keeps aspect ratio on height even if the header elements (logo and ul) end before that..