CSS - Background-size: Cover is too big

Question

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.

#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;
}

Here is my Demo

Full Screen Demo

Answer 1

try this instead cover:

#wrapper {
background-size:contain;
}