CSS Background Attachment Scroll/Fixed and Background Size cover

enriqg9 picture enriqg9 · Apr 14, 2014 · Viewed 10.5k times · Source

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

Example:

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

Answer

jennz0r picture jennz0r · Apr 14, 2014

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.