How do I add a different background color past the end of a page?

Question

Basic Premise: I'm on MacOS, and like many mobile platforms built around a touchscreen or touchpad, the scrolling is, for lack of a better description, "stretchy". That is to say, if you scroll to the beginning or end of a page, you can scroll past it somewhat with a stretchy feel to it. (Sorry if there is some official terminology I'm missing.)

What I Want: I have designed a page with a white background, but the footer at the bottom of the page is black. I know it is a small detail, but I think it would look very nice if the area past the bottom of the page had a black background color to match the footer.

Question: Is there any way to achieve this? Specifically, can I have the color of the background past the bottom of my page be different from the background for the rest of the page?

user_2565909 · Answer

You can style the background color of the HTML, see this link as well: https://peter.coffee/htmls-background-color.

The relevant (css) part looks like this:

html {
  background-color: $header-footer-color;
}

body {
  background-color: $maybe-white;
}

If you have a different color for the header, and a different one for the footer you could use a gradient; source: https://gist.github.com/peterramsing/d3ba8502730471691f73361f0490a185#gistcomment-3512344

How do I add a different background color past the end of a page?

1 Answers