title: Responsive width Div with image background as a full width header image (fixed height)
body: <p>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. </p>
  
  <p>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. </p>
  
  <p>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. </p>
  
  <p>Is there an easy way around this?</p>