title: Scrolling with CSS gradient background
body: <p><a href="http://web.ist.utl.pt/~ist426015/comisto/ementa" rel="nofollow noreferrer">Here's the page.</a> The space below "Pedidos", that scrolls, has a gradient background. My problem here is that I want the background to continue scrolling and repeating as I scroll, but it just stays fixed. I've experimented on a simple page, and it does scroll, so why doesn't it happen here? Here's the relevant styling for the section:</p>
  
  <pre><code>.pedidos #list {
    width: 100%;
    font-size: 1.3em;
    margin: 0;
    padding: 0;
    overflow-y: overlay;
    max-height: calc(100vh - 405px - 10px);
    background-image: repeating-linear-gradient(180deg, #e1e1e1, #e1e1e1 35px, #cdcdcd 35px, #cdcdcd 70px);
    background-repeat: repeat;
  }
  </code></pre>
  
  <p><strong>EDIT</strong></p>
  
  <p>Here's the current code of the area (the list item is just there to create space to demonstrate):</p>
  
  <pre><code>&lt;ul id="list"&gt;
    &lt;li style="height: 1000px; background-color: transparent;"&gt;a&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>