修正了顶部导航栏和滚动的背景

Question

我为我妹妹的生日为一家假公司创建了一个网站，并且我在修复背景时遇到了一些麻烦。我知道这应该是简单的，只是一个附件的问题：固定的，但似乎没有工作的原因。那么其原因显然是我，但我想你能帮助我解决这个:)

这里是网站：http://camilleperrin.fr/BBE/，当你需要滚动（此页上，如果你有一个1920x1080分辨率显示的问题：http://camilleperrin.fr/BBE/index.php?page=careers ）。如果你有一个巨大的屏幕，你不能看到问题，背景图片不会留在它应该的地方，并随着滚动下去。

这里是我的代码（我被互联网的帮助下，我没有想出这一切我自己）：

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> 

如果您对我如何解决这个问题有所了解，同时保留我的模糊文本容器，这将是真正的帮助湖

谢谢！

Camile

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 */ }