如何使用CSS创建粘性背景？

问题出现的原因：

由于#sticky_back的高度未知，所以可以使用网格布局（grid layout）来解决。

解决方法：

1. 在父元素（#rest）中添加display: grid；

2. 在子元素（#content和#sticky_back）中添加grid-area: 1 / 1 / 2 / 2；

3. 在#content中添加z-index: 0，将元素置于前景。

代码示例：

#rest {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto 1fr;
}
#content {
  z-index: 0;
  grid-area: 1 / 1 / 2 / 2;
  margin: 0 auto;
}
#sticky_back {
  grid-area: 1 / 1 / 2 / 2;  
}
html,
body {
  margin: 0;
  width: 100%;
  max-height: 100%;
  max-width: 100%;
}
#header {
  height: 100px;
  width: 100%;
  background: black;  
}
#rest {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto 1fr;
  background: blue;
}
#content {
  width: 50%;
  z-index: 0;  
  grid-area: 1 / 1 / 2 / 2;
  margin: 0 auto;
  background: yellow;
}
#sticky_back {
  width: 100%;
  height: 50px;
  grid-area: 1 / 1 / 2 / 2;  
  position: sticky;
  top: 0;
  background-color: pink;
}

  


  

  

    

    

      
        psum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor st dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu f
      
    
  

如果高度未知，可以参考以下链接中的代码示例进行调整：

- [jsfiddle.net/w4j1e68L/3](https://jsfiddle.net/w4j1e68L/3)

- [stackoverflow.com/questions/14142378/…](https://stackoverflow.com/questions/14142378)

如果要将粉色背景更改为背景图像，可以参考以下链接中的代码示例：

- [codepen.io/gcwebdev/pen/gOLeNNe](https://codepen.io/gcwebdev/pen/gOLeNNe)

请确保img选择器前面没有#，应该是#sticky_back img，而不是#img。