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

【问题标题】：How to place a responsive background according to content height with HTML / CSS?如何使用 HTML / CSS 根据内容高度放置响应式背景？
【发布时间】：2013-01-07 05:21:58
【问题描述】：

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

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

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

有人可以向我解释一下吗？

致以诚挚的问候

【问题讨论】：

@KyuuSung，保持发布您尝试过的代码的习惯！而不是人们为您开发代码，纠正错误更适合StackOverflow，而且人们不愿从头开始提供代码！或为你做作业！因此，发布您尝试过的内容可以避免关闭问题！ :) 快乐极客！

标签： html css background height

【解决方案1】：

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

【讨论】：

【解决方案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 像素，它应该会出现，但不是全部，左右的其余背景应该被隐藏。

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

【讨论】：