3

Why is background-size:cover different if background-attachment: scroll or background-attachment: fixed used?

Example:

http://jsfiddle.net/enriqg9/Yn43U/

enriqg9
  • 1,455
  • 1
  • 21
  • 40
  • `background-attachment:fixed` seems to make the `background-size:cover` covering the whole page no matter which element the `background` is applied to. The element just becomes a small window helping us see a part of the large background-image. In fact the `background-attachment: scroll` makes the bg image scroll along the scrolling thumb of the page (not of the element), it's in fact fixed to the element. To make it scroll along the element, you can use `background-attachment:local` instead, but looks like we can't cover it over the element with `background-size:cover`. – King King Apr 14 '14 at 01:24

2 Answers2

5

The difference isn't really in background-size: cover. The difference between background-attachment: scroll and background-attachment: fixed is that

"...scroll means that the background is fixed with regard to the element itself and does not scroll with its contents. (It is effectively attached to the element's border.)

"...fixed means that the background is fixed with regard to the viewport. Even if an element has a scrolling mechanism, a ‘fixed’ background doesn't move with the element."

as MDN says. So you'll see in your fiddle that the background-attachment: fixed background doesn't remain in its containing element <div id="two"> border. It is, instead taking on the fixed point of absolute positioning 0, 0 in the entire body's background.

In essence, background-attachment: fixed is overwriting background-size: cover and not allowing the latter style to take effect.

jennz0r
  • 1,533
  • 2
  • 15
  • 26
  • Thank you, I see here (http://stackoverflow.com/questions/3534441/how-to-fix-background-image-inside-div) that there is no work around with this besides changing the background position using js. – enriqg9 Apr 14 '14 at 04:38
0

When you assign background-size:cover to a background-attachment: fixed item its container will be the actual view port the item is sitting in. In your case the cat image is stretched to fit the total width of the fiddle result box. The reason why it is this way might be because since it applies position absolutely to the viewport it also gathers the size required from the viewport.

3066d0
  • 1,853
  • 1
  • 14
  • 18