title: CSS3 Background Size "Zoom"
body: <p>I am trying to implement a full page background image as discussed <a href="http://css-tricks.com/perfect-full-page-background-image/" rel="nofollow">here</a>. </p>
  
  <p>I am using the first method, the CSS3 technique. However, when I use <code>background-size: cover</code> like the author suggests, the image is "zoomed" in way farther than it needs to be and I don't understand why.</p>
  
  <p>Is it a problem with the size of the image or do I have something else wrong?</p>
  
  <p><a href="http://achingarmspgh.herokuapp.com/" rel="nofollow">Here</a> is a link to the page.
  achievable I want to see the entire tree, trunk and all. I've already tried setting the <code>background-size</code> to "100% auto" and the effect is the same. I've also already tried <code>background-size</code> to "contain" and now the image is too small.</p>
  
  <p>No JavaScript solutions please. I <em>know</em> this achievable with just CSS.</p>
  
  <p><strong>UPDATE</strong> </p>
  
  <p>Contain looks good on a desktop site, but it looks bad on a phone/table. Cover looks good on a phone/table but bad on a desktop. I guess I'll use the one that looks the best on each device?</p>
  
  <p><strong>UPDATE</strong></p>
  
  <p>I think I could use contain across the board, I would just have to resize the bg image to be thinner for smaller devices. </p>