title: How do I get an infinite vertically scrolling image in CSS?
body: <p>I'm trying to add an infinitely vertically scrolling image much like Adam Whitcroft's fantastic <a href="http://adamwhitcroft.com/batch/" rel="nofollow">landing page</a>. I've looked at his source code, but I can't figure out how he pulled it off. The idea is that the "I'm a scientist" text will appear over the image.</p>
  
  <p>My current code is: </p>
  
  <pre><code>&lt;div class="ani"&gt;
      &lt;div class="container"&gt;
              &lt;img src="img/Gene.png" alt="Scrolling Genes" /&gt;
          &lt;/div&gt; 
  &lt;h3&gt; I'm a scientist. &lt;/h3&gt;
      &lt;p&gt; I worked at.... &lt;/p&gt;        
  </code></pre>
  
  <p>The CSS for the "ani" class is: </p>
  
  <pre><code>.ani {
  background: url(img/Gene.png);
  color:#ecf2f9;
  text-align:center;
  -webkit-animation:bgscroll 20s infinite linear;
  }
  </code></pre>
  
  <p>And for "container":</p>
  
  <pre><code>    .header .container {
      max-width:400px;
  }
  </code></pre>
  
  <p>That code was (shamefully) taken from the site I mentioned above. I <em>can't</em>, for the life of me, figure out how to create a scrolling image above the text.</p>
  
  <p>Thanks <em>very</em> much in advance.</p>