scaleYを使用して画像を3分割せず1枚で済ませるサンプル

使用している画像

<div id="outer">
  <div id="inner">
    <p>Hello world!</p>
    <p>Hello world!</p>
    <p>Hello world!</p>
  </div>
</div>

#outer::before,
#outer::after {
  display: block;
  content: "";
  width: 200px;
  height: 20px;
  background: url(bg_pink.png) no-repeat;
}
#outer::after {
  -ms-transform: scaleY(-1);
  -webkit-transform: scaleY(-1);
  transform: scaleY(-1);
}
#inner {
  width: 180px;
  padding: 10px;
  background: url(bg_pink.png) repeat-y -210px 0;
}