I have inear-gradient background with 100vh (I have also tried it with 100% but with the same results), I also have "background-attachment: fixed;". This works on both laptop and desktop PCs, but doesn't work on mobile devices. On mobile, the gradient spreads out throughout the entire page rather than just the visible screen.
My CSS is:
body{
background: rgb(32, 149, 50);
background: linear-gradient(165deg, rgba(32, 149, 50, 1) 0%, rgba(32, 149, 50, 1) 39%, rgba(149, 150, 150, 1) 48%, rgba(183, 184, 184, 1) 65%, rgba(255, 255, 255, 1) 80%, rgba(255, 255, 255, 1) 100vh);
background-attachment: fixed;
}
This is how it works on a laptop, this works correctly - There is a blue image that fades in opacity as you scroll down, the middle of the video where it shows the bottom of the page is the key part. laptop view
And this is how it works on a mobile phone, this doesn't work - The image is still there too. mobile view