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

我需要将此背景应用到我的网站主要内容中：

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

问题是，我不知道主要内容会有多大，那么我该如何根据高度切割和放置它呢？我需要多少块，如何用css放置它们

有人能给我解释一下吗

---

致以亲切的问候

如果您只需要高度支撑，请将其切成3块：上部、中部和底部。使用“重复y”将背景设置为中间部分，并将上部和下部分别放置在“顶部：0”和“底部：0”中，您应该完成此操作。

我这样解决它：

#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像素，它应该出现，但不是全部，其余的背景左右应该隐藏

---

有人能帮我让它响应吗？

@KyuuSung，坚持实践发布你尝试过的代码！而不是人们为你开发代码，纠正错误更适合

StackOverflow

，而且人们对从头开始提供代码犹豫不决！或者为你做家庭作业！所以发布你尝试过的代码可以节省时间结束问题！：）快乐的极客！