Javascript 仅重复分割器背景图像的中间部分

好的，我有一个分割图像，它的顶部和底部都会褪色，如下所示： 我可以用一个精灵和3个DIV来重复它的中间部分吗？我必须提到我的身高是可变的。我怎么能做那样的事？我需要3张图片（顶部、中部和底部）吗

此文件的当前HTML和CSS代码：

HTML:
<div class="left-side">
</div>
<div class="vdiv25p"></div>
<div class="right-side"></div>

CSS:
.left-side {
display: inline-block;
width: 720px;
}

.vdiv25p {
display: inline-block;
width: 24px;
height: 658px;
background-image: url(../images/vdiv-large.png);
background-position: center center;
background-repeat: no-repeat;
}

.right-side {
width: 236px;
display: inline-block;
vertical-align: top;
}

HTML：
CSS:
.左侧{
显示：内联块；
宽度：720px；
}
.vdiv25p{
显示：内联块；
宽度：24px；
高度：658px；
背景图像：url（../images/vdiv large.png）；
背景位置：中心；
背景重复：无重复；
}
.右侧{
宽度：236px；
显示：内联块；
垂直对齐：顶部；
}

---

另外，我知道如何使用JavaScript或jQuery，但我想知道是否有一个CSS唯一的解决方案：）

我想我理解你现在的要求。如果我有误解，请纠正我

}

---

这段代码实现了我相信您正在寻找的目标。在一个div内设置多个背景图像（本例中为3）。一个图像设置在顶部（背景位置），一个设置在底部，一个设置在中心。在（背景图像）属性中指定图像的顺序将设置它们将对彼此产生的效果（类似Z索引的效果）。背景大小告诉对象他们将从其父元素中获取什么（宽度、高度）。要获得重复的中心图像，您可以使用正常（背景重复）值。

我不完全理解您的要求。你有什么办法可以澄清吗？您想知道如何使中间图像将其高度调整为.left side div的100%吗？然后取div的宽度，减去什么高度？@AaronSiciliano这很简单，我希望分割线延伸到左边元素的高度，如果它是一个简单的1x1图像，它会很简单，但我的客户要求分割线在末端和底部有那些褪色的部分，你现在明白了吗？：）

.vdiv25p {
    display: inline-block;
    width: 24px;
    height: 658px;
    background-image: url("http://www.artwork.com/press_rl/solid.gif"),url("http://www.artwork.com/press_rl/solid.gif"), url("http://upload.wikimedia.org/wikipedia/commons/thumb/3/38/Rect_Geometry.png/220px-Rect_Geometry.png");
    background-position: top, bottom, center;
    background-repeat: no-repeat, no-repeat, repeat-y;
    background-size: 100% 10%, 100% 10%, 100% 10%;