Ви можете створити три частини (верхній, нижній, зміст). Вгорі та внизу (без повторення) та Вміст (повторити-у)

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
}

DEMO

http://dabblet.com/ast/5865448

you could even draw it from CSS : http://codepen.io/gcyrillus/pen/HEFtk

rgba(), border-radius, ..

Here is the demo http://jsfiddle.net/yeyene/Z2XRh/

1) додайте 2 інтервали всередину div, у моїй демонстраційній версії, #imgTop (Зелений образ: який є частиною тла вашого фону з точною висотою) та #imgBtm (Червоне зображення: який є частиною фонового дна з точною висотою).

2) дайте фонове повторення-y вашим діб з вашим середнім пратом, яке ви хочете повторити.

HTML

<div id="yourDiv">
    
    Repeated background

    Repeated background

    Repeated background

    Repeated background

    Repeated background

    Repeated background

    Repeated background

    Repeated background

    
</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;
}

Я створив 3 двійки, один для верхньої частини (постійний висота = висота нижнього зображення, фонове зображення = верхня частина), один для повторюваної частини (висота не вказана, фон = повторюване зображення), а один для нижньої частини (постійна висота = висота нижнього зображення, фонове зображення = нижній малюнок)

Одне рішення - мати три елементи для кожного типу фону. Абсолютно поміщайте верхню та нижню фонові зображення у розділ, що містить повторюваний фон, а потім додайте текст з необхідним підкладкою.

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-трюків. com/browser-support-псевдо-елементи/.

Код буде схожим, за винятком того, що вам не доведеться явно створювати верхній та нижній елементи, які ви могли б просто зробити

#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/ має деякі приклади та список браузерів, які його підтримують.

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

Спробуйте це, це 9-патч для розробки веб-сайтів. Не знаю, чи це корисно, просто знайшов це.

Я б додав наступний CSS до вашого div

#middleDiv{
     clear:both;
}

Це, поряд з не встановленням висоти, дозволить його автоматично збільшуватись залежно від вмісту всередині div.

Ви також можете встановити міні-висоту, щоб структура сторінки не була скомпрометована, коли всередині немає вмісту.