title: Set background image to fill entire page
body: <p>First of all, I know there is lot of threads about this, but I just cant seem to get it right for this one particular page.</p>
  
  <p>I spent countless hours trying to get this right and I did for most of the pages I have on my website, but this one I just cant get right. So here is what I have now:</p>
  
  <pre><code>body, html {
  height: auto;
  min-height: 100%;
  </code></pre>
  
  <p>}</p>
  
  <pre><code>body {
  background-image: url(../images/image.png);
  min-width: 1200px;
  background-repeat: no-repeat;
  height: auto;
  min-height: 100%;
  background-size: 100% 100%;
  background-size: cover;
  </code></pre>
  
  <p>}</p>
  
  <p>It works somewhat fine on big screen but on mobile the body does not cover the entire screen (neither does on big screen, but the picture fill entire screen anyways). </p>
  
  <p>I know i can use </p>
  
  <pre><code>    background-attachment: fixed;
  </code></pre>
  
  <p>Which seems to be working when I test different resolution in Chrome on windows, but when you actually try it on android it doesn't work since this is not supported there.
  <a href="https://i.stack.imgur.com/RRjXY.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/RRjXY.png" alt="enter image description here"></a></p>