如何在 div 中固定背景？答案

【问题标题】：How can I have fixed background in a div?如何在 div 中固定背景？
【发布时间】：2011-07-06 09:55:51
【问题描述】：

我有一个网站，在我的一个页面中，我使用了一个看起来像编辑器的 div。我可以在这个 div 和上面的内容中有一个背景。当我在 div 中滚动时，我希望这个背景保持在一个固定的位置。

我的代码是这样的：

 <div id="myEditorArea"  style="vertical-align: top; width: 240px; height: 320px;      background-image: url('image.png'); background-repeat: no-repeat; background-position: center center; background-attachment:fixed; overflow:scroll; text-align: left;">

 bla bla bla

 </div>

当我在 div 内滚动时，背景保持固定并且可以正常工作。问题是当我滚动整个页面时它正在移动。

有谁知道可能是什么问题？

提前致谢

【问题讨论】：

你能链接到页面吗，我不确定我是否理解问题。
你忘了结束style="..."。你写了style="...
链接到页面有点复杂。我有一个例子。我找到了这个链接quackit.com/html/codes/html_background_codes.cfm，我想做同样的事情，就像他为固定的背景图片所做的那样。我的问题是，当我滚动整个页面时，这个图像正在移动，而不仅仅是在这个 div 内。
好的，我找到了解决方案。我必须将背景附件设置为滚动而不是固定，并且与溢出一起工作：滚动。还不适合 IE。还是谢谢

标签： css html background background-position

【解决方案1】：

这是background-attachment: fixed;http://www.w3schools.com/css/tryit.asp?filename=trycss_background-attachment 的示例。这应该是你需要的。

【讨论】：

【解决方案2】：

来源：https://codyhouse.co/gem/alternate-fixed-scroll-backgrounds/

html:

<div class="cd-fixed-bg cd-bg-1">
        <h1><!-- title goes here --></h1>
    </div>

css:

body, html, main {
    /* important */
     height: 100%;
}

.cd-fixed-bg {
min-height: 100%;
background-size: cover;
background-attachment: fixed;
background-repeat: no-repeat;
background-position: center center;
}

.cd-fixed-bg.cd-bg-1 {
background-image: url("../img/cd-background-1.jpg");
}

【讨论】：