Why does background-attachment: fixed make background-size:cover resize to the window proportions?

Question

If you want a header image that resizes to cover the entirety of the header but also want the background-attachment to be fixed the background image will no longer cover the containing div but will attempt to cover the entirety of the window.

Here'a fiddle that shows the problem. Just toggle the commend of line 13 on the CSS. When you change to http://jsfiddle.net/TqQv7/155/

#top-left {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 50%;
    height: 50%;
    background: #000 url('http://placekitten.com/2000/1000') no-repeat;
    -moz-background-size: cover;
    background-size: cover;
    -webkit-background-size: cover;
    -o-background-size: cover;
    background-color: transparent;
    /* background-attachment: fixed; */
}

background-attachment is 'scroll' by default. So with 'fixed' commented out the cat picture resize to the shape of the top left box without a problem but with 'fixed' the cat background stays fixed to the page but the cat picture size then "covers" the entire page.

Ideally I want to recreate the header here: http://startbootstrap.com/templates/stylish-portfolio/index.html

But with the header set to 50% of the page height. It works within this example because the header is full page.

This seems to be compatible with the standard as all modern browsers appear to do the same but I can't understand why it behaves this way?

Answer 1

This is because setting background-attachment: fixed alters the background positioning area to that of the initial containing block, which is always the size of the viewport. From the spec:

If the ‘background-attachment’ value for this image is ‘fixed’, then [the ‘background-origin’ property] has no effect: in this case the background positioning area is the initial containing block [CSS21].

The behavior of background-size: cover is then influenced accordingly.

You can still achieve the desired behavior with a fixed background by setting background-size: auto 50% instead, so its height scales to 50% that of the page, mirroring the height you have given to the element, and its width adjusts to scale:

-moz-background-size: auto 50%;
-webkit-background-size: auto 50%;
-o-background-size: auto 50%;
background-size: auto 50%;

Notice that I've also moved the standard background-size declaration to the bottom to ensure all browsers use that one over the non-standard implementations where available.