Исправлен фон с верхней навигацией и прокруткой

Question

Я создаю сайт для поддельной компании для дня рождения моей сестры, и у меня немного проблемы с фиксированным фоном. Я знаю, что это должно быть просто и просто вопрос привязанности: исправлено, но по какой-то причине оно не работает. Ну причина, очевидно, меня, но я думал, что вы могли бы помочь мне с этим :)

Вот сайт: http://camilleperrin.fr/BBE/, и проблема возникает, когда у вас есть для прокрутки (на этой странице, если у вас есть разрешение 1920х1080: 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> 

Если у вас есть представление о том, как я могу это исправить, сохраняя мой размытый текстовый контейнер, это будет действительно helpfu л.

Спасибо!

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

---

Edit - Другой подход

Как обсуждалось в комментариях, предыдущий метод может не охватывать весь видовой экран, потому что #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 */ }