CSS 背景图像在移动设备上全屏 android 设备不完美

Question

wow. How hard can it be to create a full screen background image with HTML and CSS? Seems to be quite hard. At least, the internet if full of answers like this css perfect full screen image background and this https://css-tricks.com/perfect-full-page-background-image/ .

In fact, the demo of the second link works also on mobile android devices: https://css-tricks.com/examples/FullPageBackgroundImage/progressive.php

But I still have no luck. I copied the style

html {
    background: url(/images/snowback.png) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

To my stylesheet https://aoc-2019.netlify.com/css/retro.css and still, the background image is not perfect: https://aoc-2019.netlify.com

It first seems to be perfect, but the Android browser hides the adress bar when you scroll around a bit and then the background will not be resized. This leads to a region on hte bottom of the page which is not covered by the background image.

And as I said, the demo above works quite well.

What is the difference between my page and the demo? Any idea?

Answer 1

The differences I can easily spot are...

CSS-Tricks version: html and body have no height or min-height.

Your version: html and body both set too 100% for height and min-height.

CSS-Tricks version: Body set to overflow-x: hidden;

Your version: No overflow rule on body.

I suggest you replicate what they did precisely, with no added content, make sure it works as expected. Then recreate it within your site.

If it turns out that the 100% height and min-height are the problem, and yet you need those for a sticky footer or something. Then you may be able to use a secondary wrapper div to facilitate your sticky footer. Like put the height/min-height rules on an fullwrapper div, then within that use a pagewrapper as normal with the sticky footer.

Answer 2

There are several differences on how the page is structured. Long story short, the main thing that is preventing it from working as you expected is the assignment of height: 100% to your HTML element. As you can read here directly from Google's developers website , assigning height: 100% gives to an element the height available with the bar displayed and won't resize once it's hidden. If you don't want to revise and change your code and need a fast solution, just add height 110% to the HTML and you'll get the same effect as in the compared link.