HTML背景图像不滚动_Html_Css_Background

HTML背景图像不滚动

html css

HTML背景图像不滚动,html,css,background,Html,Css,Background,请查看此页面：如您所见，顶部有一个固定标题，下面有一个可滚动的内容。黑色div中的内容滚动良好，但图像是固定的。我怎样才能让这个图像也滚动基本上，我将主要包装器定义如下： body{ width: 100%; height: 100%; overflow: hidden; margin: 0px; } #generalWrapper{ height: 100%; } #header{ height: 70px; width:

请查看此页面：

如您所见，顶部有一个固定标题，下面有一个可滚动的内容。黑色div中的内容滚动良好，但图像是固定的。我怎样才能让这个图像也滚动

基本上，我将主要包装器定义如下：

body{
    width: 100%;   
    height: 100%; 
    overflow: hidden;
    margin: 0px;
}

#generalWrapper{
    height: 100%;
}

#header{
    height: 70px;
    width: 100%;
    background: #080808;
}

#content{
    overflow: auto;
    position: absolute;
    width: 100%;
    top: 70px;
    bottom: 0;
    background: url("../images/background.jpg");
    background-repeat: repeat-y;
}

结构像

<body>
    <generalWrapper>
        <header>
        </header>
        <content>
        </content>
    </generalWrapper>
</body>

然后，内容

div

被元素填充（这使得

div

比屏幕高，并导致可滚动性）。但是为什么背景图像没有受到影响呢？

看起来您正在

内容div
中滚动div
，但是内容div本身没有滚动。
尝试通过查看在您的站点上发现的错误列表。
尝试将后台连接设置为滚动。有此属性的文档。
我尝试了另一种方法。首先，我将背景图像放在html上，具有以下属性
html{
    background: url("../background.jpg") center center #000; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover; 
}

然后，我将标题和内容更改为
#header{
    height: 70px;
    width: 100%;
    background: #080808;
    position: fixed;
    z-index: 55;
    box-shadow: 5px 5px 5px 5px #080808;
}

#content{
    position: absolute;
    width: 100%;
    top: 70px;
    bottom: 0;
}

这正好导致了我所期望的行为（虽然Jules Mazur在评论中所考虑的问题没有解决，但我会尝试通过为不同的分辨率提供不同的图像来解决这个问题）。我在一个2560px宽的显示器上，背景只占我屏幕宽度的3/4左右；剩下的是纯白背景。Jules，我建议不要使用W3Schools作为任何技术参考，如果需要，请使用更有效的来源，如MDN。这里是W3Schools应该避免的原因leopic，该网站没有提到W3Schools应该避免的原因。W3SSC学校有什么“无可争辩”的。至少4年后，它仍然出现在谷歌搜索结果的顶部，这说明了什么？@thefoyer的受欢迎程度并不是可靠性的指标。学校总是过时，经常出错。在参与编程4年之后，我可以诚实地说，在高质量的web标准文档方面，MDN是事实上的权威。@Jules我很抱歉，但我仍然不认为这是解决堆栈溢出问题的一个足够好的答案。你在索赔，但我没有看到证据。我很想有一些，但这一点是为了将来的参考，但我们不能只相信我们听到的每一件事。现在的答案尽可能的不带偏见，是指被广泛认可的声誉来源（MDN），并直接解决了这个问题。无论如何，这个问题已经存在了4年，而且早就解决了；我不知道你为什么如此坚决地要诋毁这个（仍然有效，但未经选择的）答案。