Login/Register
Background colour when scrolling above/below viewport?
Asked Answered
cssmomentum
J

1

8

In browsers on a Mac it's possible to scroll up past the top, and down below the bottom of body element. In each case the content snaps back, but for a moment (due to the momentum of your scrolling) you can see a bit of the body's background colour above/below the page's top-/bottom-most content.

The colour of this element appears set by the body's background-color value in Chrome/Safari/FF.

Is it possible to set a different colour above and below the viewport? E.g., white above, black below.

I'm fairly sure this is just out of our control — as technically this area is outside the viewport — but I'd love to hear if anyone can shed light for me.

Jamima answered 7/11, 2015 at 22:50 Comment(1)
I'd be interested in an answer to this question also, never actually thought about this before. – Illusive
H
3

Sort-of. You can use a gradient background. It's technically still a one background, but a different part of it will be visible at the top and bottom.

The rendering of the background gradient is going to be surprising because of a confusion between <body> and <html> backgrounds that browsers keep for backwards compatibility. You need to give the <html> element height or min-height, otherwise the background gradient will use <body>'s height!

html {
    background: linear-gradient(red, blue); // use color stops for hard edge
    min-height: 100%;
}

And if you want to cover it with another background color for the page content, expect to fight height:auto and margin collapsing annoyances:

html {
    background: linear-gradient(red, blue);
    height: 100%;
}

body {
    background: green;
    height: 100%;
    margin: 0; padding: 1em;
}
Houseleek answered 19/2, 2018 at 20:43 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.