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
Post a Comment