I have the following code. I use background-image: repeating-linear-gradient to give repeating linear gradients to the div.
Here is the code:
div{
--height:2em;
line-height:2em;
width:200px;
height:200px;
background-image: repeating-linear-gradient(transparent 0 var(--height), green var(--height) calc(var(--height) * 2));
overflow: scroll;
}<div>Stack Overflow is a question and answer website for professional and enthusiast programmers. It is the flagship site of the Stack Exchange Network,[4][5][6] created in 2008 by Jeff Atwood and Joel Spolsky.[7][8] It features questions and answers on a wide range of topics in computer programming.[9][10][11] It was created to be a more open alternative to earlier question and answer websites such as Experts-Exchange. Stack Overflow was sold to Prosus, a Netherlands-based consumer internet conglomerate, on 2 June 2021 for $1.8 billion.[12]</div>The problem is if there is overflow(I set overflow to scroll) and I scroll it, the linear gradients won’t scroll down with the content, but just stay there.
Are there any ways that I could fix it so the background color (linear gradients) will scroll down as the content scroll down?
Thanks for any responds!
>Solution :
make the background-attachement local
div {
--height: 2em;
line-height: 2em;
width: 200px;
height: 200px;
background-image: repeating-linear-gradient(transparent 0 var(--height), green var(--height) calc(var(--height) * 2));
background-attachment: local;
overflow: scroll;
}<div>Stack Overflow is a question and answer website for professional and enthusiast programmers. It is the flagship site of the Stack Exchange Network,[4][5][6] created in 2008 by Jeff Atwood and Joel Spolsky.[7][8] It features questions and answers on a
wide range of topics in computer programming.[9][10][11] It was created to be a more open alternative to earlier question and answer websites such as Experts-Exchange. Stack Overflow was sold to Prosus, a Netherlands-based consumer internet conglomerate,
on 2 June 2021 for $1.8 billion.[12]</div>