下にスクロールすると背景画像が覆われます

Question

下までスクロールすると、背景画像が白い部分で覆われます。それが何であるか把握していないようです。各セレクタとHTMLで再生されます。助けていただければ幸いです。リンクをクリックしてコードが表示されているCodePenに移動してください。

https://codepen.io/siamazing/pen/QaGdWq

html, body{ 
    height: 100%; 
    } 

#body { 
      background-image: url(https://images.pexels.com/photos/267278/pexels-photo-267278.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb) ; 
      background-position: center center; 
      background-repeat: no-repeat; 
      background-attachment: fixed; 
      background-size: cover; 
      background-color: #999; 
     height: 100%; 
     font-size: 15px;} 

.container-fluid { 
    padding-top: 20px; 
    padding-left: 40px; 
    padding-right: 40px; 
    height: 100%;} 

h2 { 
    padding-left: 20px; 
    font-family: 'pacifico'; 
    font-size: 22px; 
    color: #72777f; 
    } 

header { 
    text-align: center; 
    font-family: 'pacifico'; 
    } 

article { 
    font-family: 'raleway'; 
    background-color:rgba(255,255,255,.4); 
    color: #303338; 
    padding: 10px; 
    margin-top: 20px; 
    margin-left: 30px;} 

Answer 1

ミロの回答を参照してください#body

https://codepen.io/mirohristov/pen/MrbmWj

Answer 2

からheight:100%を削除するが、ここではいくつかのトラブルシューティングのアドバイスです。

* {outline：1px dashed red; }この見た：

が容易原因要素を見つけるためになさ

- #bodyおよび高除去：100％。ルール。