title: Cover background not filling screen when screen is bigger than image
body: <p>I have got a background image which is 1920x1080. I want to resize and center this image to fill the screen and be centered <strong>at all times</strong>. I have used two different approaches:</p>
  
  <p>1:  </p>
  
  <pre><code>.background{
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
  }
  </code></pre>
  
  <p>2:</p>
  
  <pre><code>.background{
      max-width: 100%;
      max-height: 100%;
  }
  </code></pre>
  
  <p>Both work on my desktop computer, which has a resolution of 1280x1024 (Yeah, they still exist). But when I view this page on my mobile phone, which has a resolution of 1920x10180, in portrait, the image does not fill the entire screen.</p>
  
  <p><a href="http://imgur.com/6KhULpI" rel="nofollow">Desktop</a><br>
  <a href="http://imgur.com/SHpVQEQ" rel="nofollow">Mobile phone</a></p>
  
  <p>As you can see the image does not fill the screen as supposed to on my mobile phone. Does <code>cover</code> not fill the screen when it is bigger than the image itself? If so, how can I fix this?</p>
  
  <p><strong>EDIT:</strong> Full style of <code>.background</code>:</p>
  
  <pre><code>.background{
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
      background-position:center center;
      filter: blur(3px);
      -webkit-filter: blur(3px);
      -moz-filter: blur(3px);
      -o-filter: blur(3px);
      -ms-filter: blur(3px);
      z-index: 0;
  }
  </code></pre>
  
  <p><strong>EDIT2:</strong> 
  I generate a random image to be the <code>background</code> of <code>&lt;div class="background&gt;&lt;/div&gt;</code>:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
      var NUMBER_OF_IMAGES = 5;
      var rand;
      var setImage = false;
  
      function randomIntFromInterval(min,max){
          return Math.floor(Math.random()*(max-min+1)+min);
      }
  
      //Generate random image
      if(!setImage){
          rand = randomIntFromInterval(1, NUMBER_OF_IMAGES);
          document.getElementById('background').style.background = 'url(img/' + rand + '.jpg) no-repeat center center fixed';
      }       
  &lt;/script&gt;
  </code></pre>