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

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进行定位。
欢迎提出任何建议。
附言：
iframe不是选项。

- 6bytes

---

如果使用固定的background-attachment值放置了background-image，则background-position是指视口而不是元素的padding box。- http://reference.sitepoint.com/css/background-position - Jawad

Answer 1

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

- 6bytes

Answer 2

MDN中对于fixed的解释如下：

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

使用scroll代替fixed：

此关键字表示背景相对于元素本身固定，不随内容滚动。（实际上是附加到元素的边框上。）

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

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

- ilyaigpetrov

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

- gcb