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

Question

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

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

问题是我的背景图像是相对于 Canvas 定位的，我需要它相对于 #mydiv 定位并且仍然不滚动。

为了说明问题请看这里http://jsfiddle.net/QPrUz/1/
在示例中，#div1 看起来不错，但 #div2 根本不显示背景，因为它是相对于 Canvas 而不是 #div2 定位的。

欢迎提出任何建议。

附言
iframe 不是一个选项。

Answer 1

根据 Jawad 的评论，使用 CSS 是不可能的。我最终将背景更改为可重复的内容。