How do I get my header image to fill the width whilst keeping same height and aspect ratio?

Question

I have a header image which is 1358 × 218. On larger screens, it doesn't fit the width of the screen. I want it to scale the image, keeping aspect ratio, so the width always fills 100% of the width of the browser. Here is the code I currently have:

http://jsfiddle.net/qD5n5/

How can I achieve this?

Several possible answers are given here: http://stackoverflow.com/questions/376253/stretch-and-scale-css-background — oal, Oct 14 '12 at 17:53

score 1 · Answer 1 · answered Oct 14 '12 at 17:53

1

On modern browsers (IE >= 9 and other browsers) you can use background-size: cover. Otherwise you would need to change the markup, possibly by displaying the image with an <img> tag instead of a CSS background.

answered Oct 14 '12 at 17:53

Jon

428,835
81
738
806

kumiau · Answer 2 · 2012-10-14T18:00:17.590

1

You can't modify a background-image size. You would have to it like this:

<div id="header" style="oveflow: hidden; height: 50px /*your fixed height*/">
  <img src="background.jpg" style="max-width: 100%" />
</div>

this will stretch the image to the 100% keeping the aspect ratio and the overflow: hidden will let you keep a fixed height.

here's the fiddle: http://jsfiddle.net/kumiau/qD5n5/1/

edited Oct 14 '12 at 18:00

answered Oct 14 '12 at 17:55

kumiau

714
3
17

you can remove overflow:hidden, but in that case the height wouldnt always be the same as the title of the question suggest is required. – kumiau Oct 14 '12 at 18:02

score -1 · Answer 3 · answered Oct 14 '12 at 17:53

just remove the height , if you set width and no height , the broswer will keep aspect ration

  #header {
    background-image:url('http://i.imgur.com/RvQdH.jpg');
    width:100%;        
    margin-left:auto;
    margin-right:auto;
    background-position:center;
    background-repeat:no-repeat;
   }

use these css settings for the actual <img> tag , not a div for the browser to resize properly

How do I get my header image to fill the width whilst keeping same height and aspect ratio?

3 Answers3