title: CSS - full screen background image that does not crop at all
body: <p>Please don't flag this as being a duplicate unless you are 100% sure.</p>
  
  <p>I need an image as a background image that is 100% width and height with no cropping. So it should stretch/squish however to fit the screen. However, I am unable to use an img tag for this, as that would place the image on top of other backgrounds I am using, so I have to use the background css property.</p>
  
  <p>Here is the tutorial I was using for css full screen background images, that doesn't seem to be doing what I need: <a href="http://css-tricks.com/perfect-full-page-background-image/" rel="nofollow">CSS tricks</a></p>
  
  <p>Here is a JSfiddle of what is currently occuring: <a href="http://jsfiddle.net/83XLH/" rel="nofollow">JSfiddle</a></p>
  
  <p>I believe this is the relevant code, which is for the <code>li</code> that contains the background image:</p>
  
  <pre><code>.foo {
      display:block;
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0px;
      left: 0px;
  
      background: url("http://i.imgur.com/ZNoJHg1.jpg") no-repeat center center fixed; 
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
  }
  </code></pre>
  
  <p>Note that if you enlarge/make the render area smaller, the amount of image shown changes. This is what I am trying to avoid. I am willing to use javascript or jquery to fix this.</p>