How can I repeat an image in CSS3 with multiple backgrounds?

i am working on a project in which I have to put a curve image on the background of the container. I am using three images for that — I use a top image, a middle image which is repeatable on the y-axis, and a bottom image. The problem is that the container width (1028px) is fixed but the height is expandable.

So, the middle image comes over the top of the bottom image of the container, which looks like this.

But i want it look like this.

Here are my top, middle and bottom images:

• top-image
• mid-image
• bottom-image

I’m using the CSS3 multiple background image property.

HTML:

<div class="map clearfix">
      <div cla开发者_开发问答ss="mpbg"></div>
</div>

CSS:

.map {
  float: left;
  background:url("../../img/mpbg-bt-1028-205.png") no-repeat left bottom, url("../../img/mpbg-top-1028-205.png") no-repeat left top;
  margin: -30px 0 20px 0;
  z-index:999;
  width: 1028px;
}

.map .mpbg {
  float: left;
  margin:10px 0 20px 0;
  background: url('../../img/googlemap-996-380.jpg') no-repeat 17px 0, url("../../img/mpbg-mid-1028.png") repeat-y;
  width: 1028px;
  height: 380px;
}

Does the height of the container have to be expandable, if it’s going to contain a map? It’s difficult to make an expandable box with an irregular shape like your design calls for.

I think your best bet is to give your box‘s middle section a minimum height equal to the combined height of the top and bottom images:

.map .mpbg {
    min-height: 410px;/* Insert the actual correct value here */
}

This won’t work in IE 6, but in IE 6, the height property actually functions the same as min-height, so in your IE 6 stylesheet, add this rule:

.map .mpbg {
    height: 410px;/* Works around lack of support for min-height */
}

Backgrounds are not meant for this kind of styling in CSS3, it's just a hack from the CSS 2.1 days. Use border-image instead http://css-tricks.com/understanding-border-image/