Responsive width Div with image background as a full width header image (fixed height)

Question

I've been looking for inspiration, I've been out of the HTML game for many years now. I've decided to work on a project to get back into the swing of things. I see a lot of websites now with full width header images which look pretty impressive. The main thing I see is that they react to the width of the viewport.

I have an image (which is around 5000x1300px). I know may be a little extreme for what I'm using it for, but that's the image I've been given. What I require is a full width header that focuses on a specific part of that image with the overflow hidden, but if the viewport is made bigger more of the image will be revealed.

The way I've tried it so far, the browser tries to squish 100% of the 5000px width into the viewport which makes the image looked warped and squished.

Is there an easy way around this?

Answer 1

Possibly aim for the bit you want to focus with percentages.

HTML:

<header></header>

CSS:

header {
    background: url('your image') 20% 20% no-repeat;
    height: 100px; /* ? */
}

Example: http://jsfiddle.net/Q6kHZ/

Use background-size to scale the image; ex. background-size: 960px 600px;

http://jsfiddle.net/Q6kHZ/2/