如何在div中修复背景?

时间:2011-07-06 09:55:52

标签: css html background background-position

我有一个网站,在我的一个页面中,我使用了一个看起来像编辑器的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中滚动时,背景保持固定并且正常工作。问题是当我滚动整个页面时它正在移动。

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

提前致谢

2 个答案:

答案 0 :(得分:0)

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

答案 1 :(得分:0)

来源: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");
}