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

发布于 2024-11-14 23:37:01 字数 578 浏览 2 评论 0原文

我在页面上的某个地方有一个 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 不是一个选项。

原文

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

The problem is that my background image is positioned relative to canvas and I need it to be positioned relative to #mydiv and still not scroll.

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.

Any suggestions are welcome.

P.S.
iframe is not an option.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

落叶缤纷 2024-11-21 23:37:01

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

回复收藏 0 原文

玩世 2024-11-21 23:37:01

MDN for fixed 说:

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

使用 scroll 而不是 fixed：

此关键字意味着背景相对于元素本身是固定的，并且不会随其内容一起滚动。（它有效地附加到元素的边框。）

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

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

MDN for fixed says:

This keyword means that the background is fixed with regard to the viewport.

Use scroll instead of fixed:

This keyword means that the background is fixed with regard to the element itself and does not scroll with its contents. (It is effectively attached to the element's border.)

So, the full code for sticky background fixed relative to the element itself:

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

回复收藏 0 原文

一曲琵琶半遮面シ 2024-11-21 23:37:01

如果我理解这个问题，您只需定位背景图像的顶部/左侧，以便 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

If I understood the question, you just have to position the top/left of the background image so that div2 looks like div1.

here it is: http://jsfiddle.net/7kku4v1t/

I only changed:

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

回复收藏 0 原文

~没有更多了~