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

Question

我需要实现这样的背景下进入我的网站的主要内容：

左右条纹应该是敏感和成长的高度，如果内容变得更大。

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

有人可以向我解释这个吗？

与亲切的问候

Answer 1

如果您只需要高度支持，切成3件：上部，中部和底部。将背景设置为中间部分并重复y，并将上部和下部分别置于顶部：0和底部：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像素宽度，它应该出现的，但不能全部脱下，后台的休息左右应该被隐藏。

有人可以帮我做它响应？