title: How to make a background image zoom in and out slowly
body: <p>I would like to bring some more interactive elements into my webpage.</p>
  
  <p>What i've seen before on some website's, is that the background image zoom's in slowly and back out. So that it looks more like a living thing.</p>
  
  <p>I've been searching on the internets and here. But i dont know how this technique is done exactly and i dont know the name for this kind of effect.</p>
  
  <p>I also think this should be fairly easy to achiev this with some CSS3 and HTML5.</p>
  
  <p>The questions are:</p>
  
  <ul>
  <li>Is there a name for this effect and what is it called?</li>
  <li>Can it be done with pure CSS?</li>
  <li>Is there a sample online availble for the basics?</li>
  </ul>
  
  <p>Here is the html i had in mind:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;meta charset="UTF-8"&gt;
          &lt;title&gt;Test page&lt;/title&gt;
          &lt;style&gt;
              body {
                  background-image: url("http://wallpapercave.com/wp/LXR5gFx.png");
                  background-size: 100% auto;
              }
          &lt;/style&gt;
      &lt;/head&gt;
  
      &lt;body&gt;
  
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>The goal is to let the background image zooming in slowly and back out. Like it is breathing.</p>