title: Vertically Sliding CSS Background Image
body: <p>I noticed <a href="https://it.pinterest.com/" rel="nofollow">this nice effect on Pinterest</a>.</p>
  
  <p>The background image scrolls vertically giving a sense that it's larger than the viewport. I tried playing with CSS with no luck.</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div class="out"&gt;
      &lt;div class="inner"&gt;hello&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>@keyframes scrollBgGridLinks {
      0% {
          transform: translateY(0px);
      }
      100% {
          transform: translateY(-330px);
      }
  }
  .inner {
      animation: 35s linear 0s normal forwards 1 scrollBgGridLinks;
      background-color: red;
      position: absolute;
      clip:rect(0px, 50px, 50px, 0px);
      width:200px;
  }
  .out {
      height:200px;
  }
  </code></pre>