title: CSS change header height based on width
body: <p>So I'm designing my first responsive website, and I've already run into a little problem which I can't seem to solve. </p>
  
  <p>As you can see at <a href="https://jsfiddle.net/n9xh4cLm/1/" rel="nofollow">https://jsfiddle.net/n9xh4cLm/1/</a>, there's a main container which partly overlaps the header image. When you change the width of the frame, all the elements are sized down, but the main container doesn't overlap the header anymore. Is there a way to set the height of the header to, say, <code>75%</code> of the header image, which is responsive?</p>