title: CSS Background Image full screen on mobile android devices not perfect
body: <p>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 <a href="https://stackoverflow.com/questions/7259084/css-perfect-full-screen-image-background">css perfect full screen image background</a> and this <a href="https://css-tricks.com/perfect-full-page-background-image/" rel="nofollow noreferrer">https://css-tricks.com/perfect-full-page-background-image/</a> .</p>
  
  <p>In fact, the demo of the second link works also on mobile android devices: <a href="https://css-tricks.com/examples/FullPageBackgroundImage/progressive.php" rel="nofollow noreferrer">https://css-tricks.com/examples/FullPageBackgroundImage/progressive.php</a></p>
  
  <p>But I still have no luck. I copied the style</p>
  
  <pre><code>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;
  }
  </code></pre>
  
  <p>To my stylesheet <a href="https://aoc-2019.netlify.com/css/retro.css" rel="nofollow noreferrer">https://aoc-2019.netlify.com/css/retro.css</a> and still, the background image is not perfect: <a href="https://aoc-2019.netlify.com" rel="nofollow noreferrer">https://aoc-2019.netlify.com</a></p>
  
  <p>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.</p>
  
  <p>And as I said, the demo above works quite well.</p>
  
  <p>What is the difference between my page and the demo? Any idea?</p>