6

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

Rao
  • 20,781
  • 11
  • 57
  • 77
StinkyTofu
  • 223
  • 5
  • 16
  • is this what you are after? https://jsfiddle.net/mxj5dfhs/31/ – Harry Dec 22 '15 at 17:02
  • Maybe cover isn't the answer.. from W3schools: "Scale the background image to be as large as possible so that the background area is completely covered by the background image. Some parts of the background image may not be in view within the background positioning area" – M.Bush Dec 22 '15 at 17:04
  • I think the background size becomes relative to the window rather than its element. You would think it would just cover it to the container, but it's not. This is causing the affect of it being "cropped". – StinkyTofu Dec 22 '15 at 17:09
  • @Harry Sadly it's still cropped for me in your demo Harry. Trying to have it the same size as the image below it in my demo. That's the original image size with 100% width. – StinkyTofu Dec 22 '15 at 17:10
  • https://stackoverflow.com/questions/21786272/css-background-size-cover-background-attachment-fixed-clipping-background-im – wkille Jan 20 '20 at 17:26

3 Answers3

2

try this instead cover:

#wrapper {
background-size:contain;
}
Prajwal Shrestha
  • 524
  • 3
  • 12
0

Maybe cover isn't the answer.. from W3schools: "Scale the background image to be as large as possible so that the background area is completely covered by the background image. Some parts of the background image may not be in view within the background positioning are

khawar
  • 1
  • 1
0

As others have mentioned, using background-size: contain might be an option.

However, if are ok with a little bit of the image cropped, then you might prefer to try the following combination:

  • background-size: cover;
  • background-position: center;

The cropping generally doesn't look as bad when the image is at least centered.

David Callanan
  • 5,601
  • 7
  • 63
  • 105