您可以创建三个部分（顶部、底部和内容）。顶部和底部（无重复）和内容（重复-y）

HTML

<div class="block">
    <div class="top"></div>
    <div class="content">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.    
    </div>
    <div class="bottom"></div>
</div>

CSS

.block {
    width: 947px;
}
.top {
    background: url(https://dl.dropboxusercontent.com/u/122540013/img/unspecified-height/top.png) no-repeat;
    height: 60px; // set height for your image
}
.content {
    background: url(https://dl.dropboxusercontent.com/u/122540013/img/unspecified-height/content.png) repeat-y;
    padding: 0 57px;
    overflow: hidden;
}
.bottom {
    background: url(https://dl.dropboxusercontent.com/u/122540013/img/unspecified-height/bottom.png) no-repeat;
    height: 60px; // set height for your image
}

演示

http://dabblet.com/gist/5865448

我将创建3个div，一个用于顶部（恒定高度=底部图像的高度，背景图像=顶部），一个为重复部分（未指定高度，背景=重复图像），一一个用于底部（恒定高度＝底部图像的高度，背景图像＝底部图像）

我会将以下css添加到您的div 中

#middleDiv{
     clear:both;
}

这一点，再加上不设置高度，将允许它根据分区内的内容自动扩展。

你也可以设置一个最小高度，这样当里面没有内容时，页面的结构就不会受到影响。

这是演示http://jsfiddle.net/yeyene/Z2XRh/

1） 在div中添加2个跨度，在我的演示中，#imgTop（绿色图像：它是背景顶部的一部分，具有确切的高度）和#imgBtm（红色图像：它也是背景底部的一部分。

2） 用你想要重复的中间prat给你的div加上backgroundrepeat-y。

HTML

<div id="yourDiv">
    <span id="imgTop"></span>
    Repeated background<br />
    Repeated background<br />
    Repeated background<br />
    Repeated background<br />
    Repeated background<br />
    Repeated background<br />
    Repeated background<br />
    Repeated background<br />
    <span id="imgBtm"></span>
</div>

CSS

#yourDiv {
    float:left;
    width:500px;
    background:url('http://2.bp.blogspot.com/_LkTxPZXvwBc/S-0kbnkwiyI/AAAAAAAAC98/oSUDpqeHESc/s1600/3colfwnce.jpg') repeat-y left top;
}
#yourDiv #imgTop{
    float:left;
    width:500px;
    height:100px;
    background:url('http://i25.photobucket.com/albums/c88/janica_/greenbg.gif') no-repeat left top;
}
#yourDiv #imgBtm{
    float:left;
    width:500px;
    height:60px;
    background:url('http://www.profilebackgrounds.net/images/backgrounds/bg_searing.jpg') no-repeat left top;
}

您甚至可以从CSS中绘制它：http://codepen.io/gcyrillus/pen/HEFtk

rgba()，border-radius。。

https://github.com/chrislondon/9-Patch-Image-for-Websites

试试这个，它是一个用于web开发的9补丁。不知道这是否有帮助，只是找到了它。

一个解决方案是有三个元素，每个元素对应一种背景类型。绝对地将顶部和底部背景图像放置在一个包含重复背景的div中，然后添加带有必要填充的文本。

html

<div id="content">
  <div id="top"></div>
  <div id="bottom"></div>
  Random text that can be expanded
</div>

css

#content{
  position:relative;
  padding:20px;
}
#top{
  position:absolute;
  top:0px;
  left:0px;
  background-image:url();
  width:100%;
  height:;
}
#bottom{
  position:absolute;
  bottom:0px;
  left:0px;
  background-image:url();
  width:100%;
  height:;
}

另一种方法是使用::before和::after伪元素。然而，它在旧浏览器中缺乏支持http://css-tricks.com/browser-support-pseudo-elements/.

代码将是类似的，除了你不必显式地创建一个顶部和底部元素，你可以只做

#content::before{
  position:absolute;
  top:0px;
  left:0px;
  background-image:url();
  width:100%;
  height:;
}
#content::after{
  position:absolute;
  bottom:0px;
  left:0px;
  background-image:url();
  width:100%;
  height:;
}

另一个还没有完全支持但可能是最理想的解决方案是CSS3的多种背景。http://www.css3.info/preview/multiple-backgrounds/有一些例子和支持它的浏览器列表。