定格的背景圖像掩蓋了其他內容

Question

當我把在屏幕上有width:100%和height:100%它被通過應該是它下面這樣的內容涵蓋了頂部固定的背景圖像中的div：

但是當我使用的像素值的高度像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>