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

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