title: background image cover different on Chrome and Firefox
body: <p>This 6-tile-header on a page I'm working on looks different in Chrome and Firefox. </p>
  
  <p><a href="http://epicstudios.de/carbonbikes3/index_white.html" rel="nofollow">http://epicstudios.de/carbonbikes3/index_white.html</a></p>
  
  <p>Chrome shows it correctly (see screenshot link below) and uses the background images to cover the whole screen to make it look like one image divided into several tiles, while Firefox makes 6 small images out of it.</p>
  
  <p>How do I get Firefox to show it correctly?</p>
  
  <p>How my Chrome shows it (correct): <a href="http://epicstudios.de/carbonbikes3/cb.JPG" rel="nofollow">http://epicstudios.de/carbonbikes3/cb.JPG</a></p>
  
  <p>How my Firefox shows it (wrong): <a href="http://epicstudios.de/carbonbikes3/cb_firefox.JPG" rel="nofollow">http://epicstudios.de/carbonbikes3/cb_firefox.JPG</a></p>
  
  <p>This is how each single tile is given its background:</p>
  
  <pre><code>background: url(../img/header_bg_red4.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  </code></pre>
  
  <p>Thank you!</p>