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?
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.