Size of the background image not updating on background-attachment: fixed elements

Question

Here is an example: http://jsfiddle.net/MyDkR/8/

Here is the code:

.fixed {
    height: 250px;
    width: 250px;
    background: #000 url('http://placekitten.com/200/600') no-repeat;
    background-size: auto 100%;
    background-attachment: fixed;
}

.notfixed {
    height: 250px;
    width: 250px;
    background: #000 url('http://placekitten.com/200/600') no-repeat;
    background-size: auto 100%;
}

The top element does not retain the background-size property, which declares that the height of the background will equal the height of the element.

The bottom element is identical, except that it does not have the background-attachment: fixed rule.

Is this a rendering bug? I've tested it in the latest versions of IE and Chrome. If so, is there a way to update the size of the background?

If i understand the part of [MDN:background-size](https://developer.mozilla.org/en-US/docs/Web/CSS/background-size) correctly this is the correct behavior: `If the background's attachment is fixed, the background positioning area is instead the entire area of the browser window, not including the area covered by scrollbars if they are present. Negative percentages are not allowed.` Probably this question could be helpful: http://stackoverflow.com/q/15713668/1960455 — t.niese, Aug 26 '13 at 15:40
@t.niese Post as an answer. To see the effect you can resize the window, its behavior is exactly as it is defined to behave. Also note the possible ways to resize a background for a complete answer — Zach Saucier, Aug 26 '13 at 15:45
^^ If you move/add `background-attachment: fixed` to the `.notfixed` element, you will see similar behavior. A good way to get a better understanding of the behaviors is to try them out in different combinations, see what they do, then go back and re-read the specs and/or MDN docs - then keep repeating. — dc5, Aug 26 '13 at 15:47
@Zeaklous I'm a little bit out of time (can't make a full answer including a solution). So I just added it as comment so that it is at least partial answered. — t.niese, Aug 26 '13 at 15:54
@t.niese Hopefully everyone will wait until you post because that's the only correct answer — Zach Saucier, Aug 26 '13 at 15:55
@Zeaklous feel free to make a full answer out of the comment. I don't think I'll have time to do so for the next days. - I'm not a reputation hunter :) — t.niese, Aug 26 '13 at 16:00
Basically what he is saying is that it's not possible. The fixed position positions the background in relation to the window. So if you do a 100% height, it will get 100% of the window height. Open the JS fiddle and resize the window, you will see the background changing sizes. I mean, it's possible, but you will need to use javascript for that — Henrique Feijo, Aug 27 '13 at 16:45

score 2 · Accepted Answer · answered Aug 27 '13 at 19:55

Background of the element that has the size of the element, but is fixed on the screen, can be emulated with a pseudo-element with 'position: fixed'. But then the problem is to make the element clip this pseudo-element, because overflow doesn't affect child elements with fixed position. The only workaround (found in this Russian blog article) that I know is to use the CSS clip property (which requires absolute positioned wrapper).

JSFiddle example

HTML:

<div class="fixed"><div></div></div>

CSS:

.fixed {
    height: 250px;
    width: 250px;
    position: relative;
}

.fixed > div {
    position: absolute;
    top: 0;
    left: 0;
    width: inherit;
    height: inherit;
    clip: rect(0px, 250px, 250px, 0px);
}

.fixed > div::before {
    content: '';
    position: fixed;
    height: inherit;
    width: inherit;
    background: #000 url('http://placekitten.com/200/600') no-repeat;
    background-size: auto 100%;
    z-index: -1;
}

The downside is the need to set the value for clip in length units (not percantages), which may be problematic if the height of the element should be really dynamic. In that case, Henrique Feijo's solution might be more suitable.

score 1 · Answer 2 · answered Aug 27 '13 at 16:48

If you are interested in the javascript version, you can try:

$(document).ready(function(){
    $('#smaller').click(function(){
        var oldHeight = $('.fixed').height();

        $('.fixed, .notfixed').css('height', oldHeight/1.25 +'px');
        $('.fixed').css("background-size", "auto " + $('.fixed').height() + "px")
    });
});

When you click it resizes the background. Maybe you will need to add about 10px more to the height to perfectly match the box.

MarmiK · Answer 3 · 2013-09-02T07:32:54.430

If you want it to reduce,

Just need to change 1 lines, under .fixed style

background: #000 url('http://placekitten.com/200/600') no-repeat 0 0;

this will fix the position.

and remove this line

background-attachment: fixed;

this was problem

This will do the trick,

Here I have updated the fiddle

Note: If you are looking for the image to stay in fixed size and div should decrease, then there is different way.

Define background size,

background-size: auto 250px;

I have updated fiddle for that too..

The static keyword is making the image static to the place while the page zoom change or the scroll takes place. so the image will stay on that place.

I hope this will make things clear.

Size of the background image not updating on background-attachment: fixed elements

3 Answers3