html - Scrolling with CSS gradient background -


here's page. space below "pedidos", scrolls, has gradient background. problem here want background continue scrolling , repeating scroll, stays fixed. i've experimented on simple page, , scroll, why doesn't happen here? here's relevant styling section:

.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

here's current code of area (the list item there create space demonstrate):

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

this should solve issue. background-attachment:fixed fixes background attachment viewport.

edit: in order make background scroll along rest of page, use 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; } 

Comments

Popular posts from this blog

Command prompt result in label. Python 2.7 -

javascript - How do I use URL parameters to change link href on page? -

amazon web services - AWS Route53 Trying To Get Site To Resolve To www -