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

[magdi_alafifi]

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..

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..

That is actual video.

You need a jQuery code that contain css to duplicate that feature, not just a regular css code.