Full width background image limited height

Question

I want to get a full screen background image, but only the width, not the height, like here

I play with background-size:cover; but that covers the whole page - and I just want a certain height to be covered.

Answer 1

The site you mentioned just uses a standard div background image that has fixed height and width: 100% .

For example, the site you mention uses:

 header { height: 460px; margin-top: -69px; overflow: hidden; padding: 0px; width: 100%; } 

Note the height in the code block, background-image: cover just means scaling the background image to fit the space.

Answer 2

so i found what i was looking for:

CSS

 #header-wrapper{ top: 0; left: 0; height: auto; position: absolute; width: 100%; } 

HTML:

 <div id="header-wrapper"> <img src="image.jpg" width="100%" style="border-bottom:1px solid black;"> </div> 

Thanks for the help!

Answer 3

How about background-size: 100% 80% (for example).
You can change the second value, which is the height.

Here's the fiddle .