滚动到底部时覆盖的背景图像

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

从height:100%

中删除#body

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

Answer 2

请参阅Miro的回答，但这里有一些故障排除建议。

我添加了* {outline：1px红色虚线;并看到了这个：

这使得更容易找到罪魁祸首元素 - #body并删除高度：100％;规则。