html - 如何使用 HTML / CSS 根据内容高度放置响应式背景？

Question

我需要在我的网站主要内容中实现这个背景：

如果内容变大，左右条纹应该是响应式的并且高度会增加。

问题是，我不知道主要内容会有多大，那么我如何将它剪切并根据高度放置？我需要多少件，如何用 css 放置它们？

谁可以给我解释一下这个 ？

亲切的问候

Answer 1

如果只需要高度支撑，把它切成3块：上、中、下。用repeat for y将背景设置为中间部分，将上下部分分别放在top:0和bottom:0，你就大功告成了。

Answer 2

我是这样解决的：

#content {
position:relative;
}
#left-stripe {
  background: url(" images/bg-top.png") no-repeat scroll 0 0 transparent;
  height: 85px;
  left: 112px;
  position: absolute;
  width: 90%;
}
#right-stripe {
  background: url(" images/bg-bottom.png") no-repeat scroll 0 0 transparent;
  height: 85px;
  left: 112px;
  position: absolute;
  width: 90%;
  bottom:0;
}

#middle-stripe {
  background: url(" images/bg-middle.png") repeat-y scroll 0 0 transparent;
  bottom: 85px;
  top:85px;
  left: 112px;
  position: absolute;
  width: 90%;
}

但我仍然遇到问题，它没有响应（如果用户使用他的浏览器进行缩放，它应该随之移动。

因此，如果有人来到我的网站并且宽度超过 960 像素，它应该会出现，但不是全部，左右的其余背景应该被隐藏。

有人可以帮我让它响应吗？