Scrollen mit CSS Hintergrund mit Farbverlauf

Question

Here's the page. Der Raum unter "Pedidos", der scrollt, hat einen Hintergrund mit Farbverlauf. Mein Problem hier ist, dass ich möchte, dass der Hintergrund weiter scrollt und wiederholt, während ich blättern kann, aber es bleibt einfach fixiert. Ich habe auf einer einfachen Seite experimentiert, und es scrollt, also warum passiert es hier nicht? Hier ist der relevante Styling für den Abschnitt:

.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; 
} 

EDIT

Hier ist der aktuelle Code des Gebiets (das Listenelement nur gibt es Raum zu schaffen, demonstrieren):

<ul id="list"> 
    <li style="height: 1000px; background-color: transparent;">a</li> 
</ul> 

Answer 1

Dies sollte das Problem lösen. Background-attachment:fixed behebt den Hintergrundanhang im Ansichtsfenster.

Edit: um zusammen mit dem Rest der Seite des Hintergrund blättern zu machen, verwenden background-attachment:scroll

.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; 
    background-attachment:scroll; 
}