How to make a background image zoom in and out slowly
<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>