3

I am applying a background-image to a web page but when I view the site on my Android device in the Chrome app, a white bar appears at the bottom when I scroll down.

I tried a solution that I found from an old post: White area on fixed background when scrolling on ios

It works in the Samsung Internet app but the above solution doesn't seem to be working on the Android Chrome app

Code:

body{
  background-image: url('../images/fields-and-tree.jpg');
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  transform: translate3d(0,0,0);
  -webkit-transform: translate3d(0,0,0);
  -ms-transform: translate3d(0,0,0);
  -moz-transform: translate3d(0,0,0)
}
scMarth06
  • 31
  • 3

1 Answers1

2

The white bar appears when the address bar disappears. So far the only pure CSS "solution" I have found is to just add some extra height to the html element on mobile devices. This will crop your background image when the address bar is present, but it's still better than having that big white bar at the bottom.

@media only screen and (max-device-width: 480px) {
    html {
      height: calc(100% + 60px);
      min-height: calc(100% + 60px);
    }
}
DrSiemer
  • 141
  • 1
  • 5