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

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定位的。

欢迎提出任何建议。

p.S.
iframe不是一个选项。

Answer 1

根据Jawad的评论，使用CSS是不可能的。我最终把背景改成了可重复的东西。

Answer 2

fixed的MDN表示：

此关键字表示背景相对于视口是固定的。

使用scroll而不是fixed:

这个关键字意味着背景相对于元素本身是固定的，并且不随其内容滚动。（它有效地附着在元素的边界上。）

因此，粘性背景的完整代码相对于元素本身是固定的：

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

Answer 3

如果我理解了这个问题，你只需要定位背景图像的左上角，使div2看起来像div1。

它在这里：http://jsfiddle.net/7kku4v1t/

我只更改了：

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

至

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