固定到父元素的背景图像位置

Question

我在页面的某处有一个div,我需要给它一个背景图像,当你滚动浏览器窗口时它不会移动.到目前为止这是我的代码:

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

问题是我的背景图像是相对于画布定位的,我需要它相对于#mydiv滚动而不是滚动.

为了说明这个问题,请看这里http://jsfiddle.net/QPrUz/1/
在这个例子#div1看起来很好但是#div2根本没有显示背景,因为它相对于画布而不是#div2.

欢迎任何建议.

PS
iframe不是一个选项.

Answer 1

根据Jawad的评论,使用CSS是不可能的.我最终将背景改为可重复的东西.