title: Can't get background header image to fit to width.. tried everything
body: <p>I've searched for hours upon hours and now I figure it's time for me to ask the question. I can't get my background image that is placed in my header to fit to screen. It works for every kind of computer resolution fine, but where I run into trouble is when I am viewing on a phone, it doesn't want to shrink. I've done min-height, max-height, I've tried everything, the problem partly I think is that the header div itself is smaller than this image, but I also don't really know and need some guidance, i'm relatively new to the CSS scene.</p>
  
  <p>Here is what I have:</p>
  
  <pre><code>#header {
      background-image: url('http://hamsoc.polymath.io/wp-content/uploads/2013/05/hamsocheader.png');
      background-repeat: no-repeat;
      background-position: center center;
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
      height: 209px;
  }
  </code></pre>
  
  <p>Website url is <a href="http://hamsoc.polymath.io" rel="nofollow">http://hamsoc.polymath.io</a></p>
  
  <p>Thank you for your help in advance!</p>
  
  <p><strong>Duncan Beattie gave me the answer and it worked like a charm. Here is what he said:</strong></p>
  
  <blockquote>
    <p>"You have background-size: cover which is fitting the height of the
    background image to the fixed height of your div, 209px. remove the
    fixed height and replace with padding-bottom:15% this will kep the
    aspect ratio of the div the same and scale the image as viewport gets
    smaller."</p>
  </blockquote>