重复线性梯度在折痕处突然切割

Question

On my site , I'm having issues with the repeating-linear-gradient element in CSS. For the majority of the page, the background looks ok. But suddenly, when I scroll down, it looks as if the gradient just shifts one bar to the right and makes my page look ugly. This is what I currently have as CSS:

    background:repeating-linear-gradient(45deg,transparent,transparent 50px,rgba(255,255,255,.1) 50px,rgba(255,255,255,.1)100px), #81D4FA;

I'm really having trouble, and it would be great if someone could help me. Thanks.

Answer 1

As was mentioned in the comments, background-attachment: fixed; will prevent the seam from being visible, but the stripes do not scroll with the page.

According to MDN :

A repeating CSS linear gradient is not a CSS <color> but an image with no intrinsic dimensions; that is, it has no natural or preferred size, nor ratio. Its concrete size will match the one of the element it applies to.

This means that the positioning of the edge of the image depends on the size of the element, and a 45deg line will not line up with its neighbors unless one of the dimensions is a multiple of the other. I recommend making a tile-able image in your image editor of choice and loading it as an asset rather than using repeating-linear-gradient() if you don't want the background to be fixed in place.