滚动到底部时背景图像被遮盖

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 中删除height:100%

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

Answer 2

查看 Miro 的回答，但这里有一些故障排除建议。

我添加了 * { outline: 1px dashed red; } 并看到了这个：

这使得找到罪魁祸首元素变得更容易 - #body 并删除 height:100%;规则。