背景图像位置固定的父元素 [英] background image position fixed to parent element

问题描述

我在页面上某处一个div，我需要给它当您滚动浏览器窗口，不动的背景图像。这是我的code迄今：

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;
}

问题是，我的背景图片相对于画布的位置，我需要它被相对定位 #mydiv ，但仍不能滚动。

要说明这个问题，请在这里看到 http://jsfiddle.net/QPrUz/1/

在这个例子中＃DIV1 看起来很好，但＃DIV2 不显示背景可言，因为它是位于相对于画布上，而不是＃DIV2 。

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.

任何建议都欢迎。

P.S。

iframe是不是一种选择。

P.S.
iframe is not an option.

推荐答案

根据贾瓦德的评论是使用CSS是不可能的。我最终改变背景的东西重复的。

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

这篇关于背景图像位置固定的父元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！