I'm trying to make it so that when you scroll past the top and bottom of the page, the background gradient I'm using on the body displays past the edge of the body.
Is it possible to do this?
I've tried setting background-image and background style properties on the <html> root element, but neither seems to extend past the edge of where the body traditionally ends.
Please note that this is on the <html> tag, not the <body> tag, and it does not seem like jsfiddle is able to correctly reproduce the issue due to how overscroll works there.
Here is an example for reproduction (copy it into an index.html file to test). I've also tried it with background-image, and this has the same effect.
<html style="background: linear-gradient(180deg, rgba(214,124,123,1) 0%, rgba(214,188,123,1) 100%);">
</html>
Here is a .gif of what it looks like:
Here is a .gif where a static color has been set on the <html> and a a gradient has been set on the <body>:
Like so:
<html style="background-color: red">
<body style="margin: 0; background: linear-gradient(180deg, rgba(214,124,123,1) 0%, rgba(214,188,123,1) 100%);">
</body>
</html>
I've provided the examples as vertical gradients to match the examples requested during closure, but I'm primarily interested in extending horizontal gradients above and below the page.