How to set the background color of a page for scroll pull?

user_172815 0
Viewed 3256

With touch devices (mobile, touchpads, etc.) I need to set the background-color of a page when scrolling off the body:

scroll off

I tried setting the background color of the HTML:

html {
   background-color:#00BD9C;
}

It worked as seen on the movie. However I need a white background-color for the bottom of the page. background-image for html doesn't work with scrolling off. I thought of using a gradient. Is there a better way?

touch scroll background css
1 Answers

When setting a background to the html, it will be applied on all four borders. If you just want to have a background-color on e.g. the top site, add a div element to your DOM to be displayed above your page:

<div style="height:1000px;background:#00BD9C;margin-top:-1000px;position:fixed;width:100%;"></div>

By that, the overflow color will just be applied on the top side.

Or you could also add it in pure CSS:

html:before {
  content: '';
  position: fixed;
  width: 100%;
  height: 999px;
  top: -999px;
  background-color: tomato;
}
user_39977410
Related