CODEWITHSUNDEEP
htmlcsslinear-gradientscss-gradientsoverscroll
Gavan
Gavan

Reputation: 91

Is it possible to make a background gradient on the :root <html> element extend past overscroll?

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:

overscroll without background color

Here is a .gif where a static color has been set on the <html> and a a gradient has been set on the <body>:

overscroll with red background color

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.

Upvotes: 9

Views: 482

Answers (0)

Related Questions