Member Avatar for 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..

  • 2 Contributors
  • 1 Reply
  • 139 Views
  • 11 Hours Discussion Span
  • Latest Post Latest Post by LastMitch
Member Avatar for LastMitch

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.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.