6

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.

Gavan
  • 61
  • 2
  • What's wring with this https://jsfiddle.net/RokoCB/a0hybfoq/ ? Please read [ask], then [edit] with a [mcve]. – Roko C. Buljan Jan 25 '23 at 23:32
  • @RokoC.Buljan CJSFiddle is not able to reproduce this issue due to limited overscroll. I've added more clarification. – Gavan Jan 25 '23 at 23:50
  • Why don't you style the `body` element instead? I see no issue in the image you posted... And cannot reproduce with only the code you posted :| – Roko C. Buljan Jan 25 '23 at 23:55
  • @RokoC.Buljan I've updated the example with animated .gifs showing the issue. It seems pretty clear that the intention behind styling the `` tag is partially to style the overscroll. This works for color, but does not seem to work for gradient. – Gavan Jan 26 '23 at 00:10
  • 1
    Please re-open this question. I have asked a genuine question of public interest, that I have done rather extensive searching about this issue before asking. I have a non-trivial background in this field, and this is a somewhat advanced question. I mean no offense, but the person who has closed it does not seem to have yet understood the subtle technical distinctions at play here. – Gavan Jan 26 '23 at 19:42
  • It is interesting because in the example posted, it is somewhat clear why this doesn't work (what should happen with the gradient past the final vertical stop?). When I was doing this originally and not responding to comments, I was using a horizontal gradient where the correct behavior is more apparent. This makes me wonder if there is another way to extend past the boundaries of the body? – Gavan Jan 26 '23 at 20:32

0 Answers0