title: Webkit background image is clipped
body: <p>I have a funny little problem.</p>
  
  <p>I have a background image on my <code>body</code> element, and it loads like this in Webkit browsers (Chrome specifically).</p>
  
  <p><img src="https://i.stack.imgur.com/G5msJ.jpg" alt="Bad!"></p>
  
  <p>Resizing the window seems to fix this...</p>
  
  <p>here is how it should look as intended:</p>
  
  <p><img src="https://i.stack.imgur.com/jZdFL.jpg" alt="Good!"></p>
  
  <p>CSS:</p>
  
  <pre><code>body {
  padding-top: 360px;
  font-family:Helvetica, Helvetica Neue, Arial, sans-serif;
  
  background: url('images/page-bg2.jpg') no-repeat left center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  }
  </code></pre>
  
  <p>Why is this happening and how do I fix it?</p>
  
  <p>live site: <a href="http://www.healthfair.biz/" rel="nofollow noreferrer">http://www.healthfair.biz/</a></p>
  
  <p>thanks guys!</p>