title: Background-image not being positionned at right bottom
body: <p>I'd like to have an image (kind of logo) positioned in the bottom right corner of my page.</p>
  
  <p>The page is very simple:</p>
  
  <ul>
  <li>the <code>&lt;html&gt;</code> (in red in the drawings)</li>
  <li>the <code>&lt;body&gt;</code> </li>
  <li>the <code>&lt;header&gt;</code> </li>
  <li>the <code>div#content</code></li>
  </ul>
  
  <p>The header is of fixed height. The <code>#content</code> can have very different height and it changes dynamically.</p>
  
  <p>The CSS I use:</p>
  
  <pre><code>html: {
    height: 100%;
  }
  
  body {
    min-height: 100%;
    position: relative;
    width: 100%;
    background-image:url('http://www.imagespourtoi.com/lesimages/mickey/image-mickey-3.jpg');
    background-repeat:no-repeat;
    background-size: 100px;
    background-position: right bottom;
    background-color: grey;
  }
  
  header {
    width: 50%;
    height: 180px;
  }
  
  #content {
    width: 50%;
  }
  </code></pre>
  
  <p>The HTML:</p>
  
  <pre><code>&lt;html&gt;
    &lt;body&gt;
      &lt;header&gt;
      &lt;/header&gt;
      &lt;div id="content"&gt;
      &lt;/div&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/3Eh24.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/3Eh24.png" alt="enter image description here"></a></p>
  
  <p>On the left is what happened when the <code>#content</code> height is bigger than the screen, on the right when it's smaller.
  The cloud in the drawing represents the background image. You can see on the left that it's displayed in the bottom right corner of the screen, not of the <code>&lt;body&gt;</code> (not the expected behavior).</p>
  
  <p>What am I doing wrong?</p>
  
  <p>NB: I can't reproduce such behavior on JSFiddle.</p>