Fixed ДИВА фонового изображения прикрыто другим содержанием

Question

Когда я помещаю фиксированный фоновое изображение в DIV в верхней части экрана, который имеет width:100% и height:100% он получает прикрыт содержанием, которое, как предполагается, под ним, как это:

Но когда я использую значение пикселя для высоты, как это происходит 100px:

Я хочу иметь возможность использовать width:100% и height:100%, чтобы иметь возможность получать полноэкранное фиксированное фоновое изображение, которое не закрывается.

HTML:

<div class="background"> 
    <div class="hero"> 
     <div class="arrow_down"> 
     <a><i class="fa fa-angle-down"></i></a> 
     </div> 
    </div> 
</div> 

CSS:

.background { 
    position:relative; 
    top:0; 
    overflow:hidden; 
    height:100%; 
    width:100%; 
} 

.background .hero { 
    background-image: url('../images/background.jpg'); 
    background-repeat:no-repeat; 
    background-size:100% auto; 
    background-attachment:fixed; 
    background-position:center top; 
    width:100%; 
    height:100px; 
} 

Answer 1

Вы должны попробовать использовать height: 100vh;, который является проверенным и надежным способом решить эту проблему. Я хотел бы проверить его на своем сайте, но вы не включили его, поэтому я выложу пример:

body{margin:0px;} 
 
.background { 
 
    position:relative; 
 
    top:0; 
 
    overflow:hidden; 
 
    height:100%; 
 
    width:100%; 
 
} 
 

 
.hero { 
 
    margin:0px; 
 
    padding:0px; 
 
    background-image: url('http://www.funnycatpix.com/_pics/Arghhhh532.jpg'); 
 
    background-repeat:no-repeat; 
 
    background-size:100% auto; 
 
    background-attachment:fixed; 
 
    background-position:center top; 
 
    width:100%; 
 
    height:100vh; 
 
}

<div class="hero"></div> 
 
<div class="background"> 
 
     <div class="arrow_down"> 
 
     <a><i class="fa fa-angle-down"></i></a> 
 
    </div> 
 
</div>