background image position fixed to parent element

Question

I have a div somewhere on the page and I need to give it a background image that does not move when you scroll your browser window. This is my code so far:

#mydiv {
    float:left;
    width:540px;
    margin:40px 0px 0px 20px;
    background:url(/images/myimage.jpg) no-repeat fixed 0px 0px transparent;
}

The problem is that my background image is positioned relative to canvas and I need it to be positioned relative to #mydiv and still not scroll.

To illustrate the problem please see here http://jsfiddle.net/QPrUz/1/
In the example #div1 looks fine but #div2 does not show the background at all as it is positioned relative to the canvas instead of #div2.

Any suggestions are welcome.

P.S.
iframe is not an option.

Answer 1

MDN for fixed says:

This keyword means that the background is fixed with regard to the viewport.

Use scroll instead of fixed:

This keyword 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.)

So, the full code for sticky background fixed relative to the element itself:

.sticky-background {
    background: url(...) no-repeat scroll;
}

Answer 2

If I understood the question, you just have to position the top/left of the background image so that div2 looks like div1.

here it is: http://jsfiddle.net/7kku4v1t/

I only changed:

background:url(http://i35.tinypic.com/4tlkci.jpg) fixed no-repeat;

to

background:url(http://i35.tinypic.com/4tlkci.jpg) 210px 0 fixed no-repeat;
                                                  ^^^^^^^
                                                  X     Y

Answer 3

You gotto use some javascript to achieve this.

Answer 4

As per Jawad's comment it's not possible using CSS. I ended up changing a background to something repeatable.