CODEWITHSUNDEEP
htmlcss
James
James

Reputation: 2787

How to let linear gradients scroll down as content scroll down when overflow set to scroll?

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!

Upvotes: 1

Views: 45

Answers (1)

Temani Afif
Temani Afif

Reputation: 273004

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>

Upvotes: 2

Related Questions