title: CSS - Background-size: Cover is too big
body: <p>When i try to use the background-size:cover property with a fixed position my image becomes too big, and cropped. I'd like it to be the same size as the original image, but i can't figure this out. I'm trying to keep the affect of the image staying in position.</p>
  
  <pre><code>#wrapper {
    width:100%;
    height:580px;
     background-image:url('http://www.myorderdesk.com/Providers/206190/Files/31/full_width_image_1.jpg');
  background-position: center center;
  background-attachment:fixed;
  background-repeat: no-repeat;
  background-size: 100% 100%; 
  /*background-size:cover;*/
  -webkit-transition: background-image 0.4s;
  -moz-transition: background-image 0.4s;
  -ms-transition: background-image 0.4s;
  -o-transition: background-image 0.4s;
  transition: background-image 0.4s;
  overflow: hidden;
  -webkit-font-smoothing: subpixel-antialiased;
  }
  </code></pre>
  
  <p>Here is my <a href="https://jsfiddle.net/stinkytofu/mxj5dfhs/29/" rel="nofollow">Demo</a></p>
  
  <p>Full Screen <a href="https://jsfiddle.net/stinkytofu/mxj5dfhs/29/embedded/result/" rel="nofollow">Demo</a></p>