固定背景与顶部导航栏和滚动

Question

我正在为姐姐的生日创建一家假公司的网站，但固定背景给我带来了一些麻烦。 我知道它应该很简单，并且只是附件问题：已修复，但是由于某种原因它似乎不起作用。 好吧，原因显然是我，但是我认为您可以在此方面帮助我:)

这是网站： http : //camilleperrin.fr/BBE/ ，当您必须滚动时会出现问题（如果您具有1920x1080分辨率，则在此页面上： http : //camilleperrin.fr/BBE/index.php？ page = careers ）。 如果您的屏幕很大，而您看不到问题，则背景图像不会停留在应有的位置，而是随着滚动向下滚动。

这是我的代码（我得到了Internet的帮助，但我本人并没有提出所有建议）：

CSS：

    body{
        background:url('background.jpg') no-repeat center 160px fixed;
    }

    #overallcontainer{
        padding: 70px 90px 120px 90px;
    }

    #blurcontainer {
        position: relative;
    }

    #blurbg{
        background:url('background.jpg') no-repeat center 160px fixed;
        text-align:center;
        position: absolute;
        top: 0px;
        right: 0px;
        bottom: 0px;
        left: 0px;
        z-index: 99;  
        width:800px;
        margin:0 auto;
        padding:60px;

      -webkit-filter: blur(5px);
    }

    #textContainer  {
        position: relative;     
        z-index: 100;
        background: rgba(0,0,0,0.65);
        margin:0 auto;
        color:#dde;
        width:800px;
        padding:60px;
        text-align:justify;
    }

HTML：

<div id="overallcontainer">
    <div id="blurcontainer">
        <div id="blurbg"></div>
        <div id="textContainer">
            blah blah blah
        </div>
    </div>
</div>

如果您对如何在保留模糊的文本容器的同时解决此问题有任何想法，那将非常有帮助。

谢谢！

卡米尔

Answer 1

该问题是由背景位置的160px顶部偏移引起的。 我假设您这样做是为了防止背景干扰标题。 但是， fixed位置会保持偏移，因为它在视口中有点“卡住”。 我建议从body删除背景，并将其直接应用于您的主要内容容器#overallcontainer来解决此问题：

#overallcontainer {
    padding: 70px 90px 120px 90px;
    background: url('../design/careers.jpg') no-repeat top center fixed;
    background-size: cover; /* makes sure image covers entire viewport */
}

---

编辑-另一种方法

如评论中所述，由于#overallcontainer具有基于内容的动态高度，并且可能小于实际的视口高度，因此先前的方法可能不会覆盖整个视口，从而创建空白。

可以通过将背景恢复为body ，然后创建特殊的标题元素（通过在标题中添加纯白色背景）来隐藏正文背景来缓解这种情况。

更改

<img src="design/header.jpg">

至

<header><img src="design/header.jpg"></header>

的CSS

body { 
   ...
    background: url('../design/company.jpg') no-repeat top center fixed;
    background-size: cover;
}

header {background:#FFF;}

#overallcontainer { /* no need for any styles to this div any more */ }