I'm just started to web programming, cuz many cooooool pages on awwwards.com - definitely caught my mind.

anyway, the first page what i aim for make is the pinterest (www.pinterest.com); **slowly moving background** with blur effect, floating modal and bottom fixed footer.

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.

so, how can i make **horizontally infinite flowing background with only CSS**??? (without JS)

\*conditions

1. the page is responsive, background-image's height should fit to screen
2. width follow the height's size, as original image's ratio.

and here's my code.

```html
  <head>
     <style type="text/css">
     * {
      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%;
      }
     }
     </style>
    </head>

    <body>
     <div id="animatedBackground">animatedBackground</div>
    </body>
```

thx.