title: Background image zoom-out effect
body: <p>I would like to achieve an effect where the site loads with the background "zoomed-in". The background images should gradually zoom out after the document is ready.</p>
  
  <p>I decided to use an absolute positioned element for my background:</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="intro"&gt;
    &lt;div class="intro_bg"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.intro {
     width: 100vh; height: 95vh;
  }
  
  .intro_bg {
      width: 140%;
      height: 140%;
  
      position: absolute;
      top: 0;
      left: 0;
      z-index: -1;
  
      background: url(../images/hills.jpg) no-repeat center center fixed;
      background-size: cover;
  }
  </code></pre>
  
  <p>jQuery :</p>
  
  <pre><code>    $('.intro_bg').animate({
          'width': '100%',
          'height': '100%'
      },20000, function() { alert(); });
  </code></pre>
  
  <p>Basically, this isn't working. It successfully scales <code>.intro_bg</code> but the image doesn't appear to zoom-out like intended. The image itself doesn't scale or move (which may be the whole point of <code>cover</code>).</p>
  
  <p><strong>If my idea is just not going to work, what is the optimal solution to achieve a "background zoom-out" effect?</strong></p>