修正了頂部導航欄和滾動的背景

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