3

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.

Dominic
  • 2,147
  • 1
  • 14
  • 15

1 Answers1

0

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;
}
Kornel
  • 91,239
  • 30
  • 200
  • 278