title: Is there an alternative to "background-size:cover" for faster loading speeds?
body: <p>I'm using Chrome and below is the code for my background image. This effectively makes my chosen background image cover the entire screen behind my other elements and also sets it to grayscale. It works perfectly, however I have identified that background-size:cover is slowing down the loading speed and the usability of the site dramatically.</p>
  
  <p>Is there an alternative to the "background-size:cover" (see line #1) that will render the same result visually but improve the site's loading speed? Thank you!</p>
  
  <pre><code>&lt;div style='background: url("LARGE PHOTO URL HERE") no-repeat center center fixed;background-size: cover;' class="grayscale bg"&gt;&lt;/div&gt;
  
  &lt;div id="background"&gt;
  
      &lt;style&gt;
  
          #supersized img{
  
              filter: url("data:image/svg+xml;utf8,&lt;svg xmlns=\'http://www.w3.org/2000/svg\'&gt;&lt;filter id=\'grayscale\'&gt;&lt;feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/&gt;&lt;/filter&gt;&lt;/svg&gt;#grayscale"); /* Firefox 10+, Firefox on Android */
  
              filter: gray; /* IE6-9 */
  
              -webkit-filter: grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */
  
          }
  
      &lt;/style&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>Not sure if these are relevant or not as they are IDs not classes... so I might have added them and not used them, but here are some possibly relevant styles in my stylesheet also:</p>
  
  <pre><code>#bg {
      position:fixed; 
      top:-50%; 
      left:-50%; 
      width:200%; 
      height:200%;
      z-index: -1;
      display: none;
  }
  
  #bg img {
      position:absolute; 
      top:0; 
      left:0; 
      right:0; 
      bottom:0; 
      margin:auto; 
      min-width:50%;
      min-height:50%;
  }
  </code></pre>
  
  <p>There doesn't seem to be a #background style.</p>