title: How can i make infinite flowing background with only CSS?
body: <p>I'm just started to web programming, cuz many cooooool pages on awwwards.com - definitely caught my mind.</p>
  
  <p>anyway, the first page what i aim for make is the pinterest (www.pinterest.com); <strong>slowly moving background</strong> with blur effect, floating modal and bottom fixed footer.</p>
  
  <p>with some kinda O'Reilly books, the blur, modal and footer are no more problem. but i couldn't made the background even with them yet.</p>
  
  <p>so, how can i make <strong>horizontally infinite flowing background with only CSS</strong>??? (without JS)</p>
  
  <p>*conditions</p>
  
  <ol>
  <li><p>the page is responsive, background-image's height should fit to screen</p></li>
  <li><p>width follow the height's size, as original image's ratio.</p></li>
  </ol>
  
  <p>and here's my code.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>  &lt;head&gt;
       &lt;style type="text/css"&gt;
       * {
        margin: 0;
        padding: 0;
       }
       html {
        height: 100%;
       }
       body {
        overflow: hidden;
       }
       #animatedBackground {
        position: absolute;
        height: 100%;
        width: 100%;
        background: url("http://placehold.it/1600x800");
        background-repeat: repeat;
        background-position: 0 0;
        background-size: auto 100%;
  
     border: 1px solid red;
  
        animation: animatedBackground 5s linear infinite;
       }
       @keyframes animatedBackground {
        from {
         left: -50%;
        }
        to {
         left: 50%;
        }
       }
       &lt;/style&gt;
      &lt;/head&gt;
      
      &lt;body&gt;
       &lt;div id="animatedBackground"&gt;animatedBackground&lt;/div&gt;
      &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>thx.</p>