滚动时div周围的白色区域

Question

我有一个带有固定背景图像的div（红色部分），但是当我滚动页面时，div在侧面有一些隐藏背景的白色区域

White area on the top

white areas on the sides after having scrolled below

背景图片的css代码

.as-console-wrapper {
  max-height: 100% !important
}

css的一部分

  #title {
  background: url('../res/red.jpg');
  background-size: cover;
  background-position: center bottom;
  background-attachment: fixed;
  height: 100%;
  width: 100%;
}

html代码

#text {
  width: 50%;
  height: 5000px;
  margin: auto;
  padding: 20px;
  margin-top: 100px;
  background-color: #efeff5;
  box-shadow: 5px 10px 8px #888888;
}

我该怎么做才能避免这种情况？