Using CSS3 multiple backgrounds with only one repeating

I'm trying to use CSS3 multiple backgrounds: a top section (not repeated), a middle section (a 1px slice to repeat making the container "expandable"), and a bottom section (not repeated). The problem I am having is that the middle section repeats, covering both the top and bottom sections. Same result in IE9, FF6 and Chrome. Here's my code:

    #container {
   margin: 0 auto;
   width:1093px;
   background-image: url('WC-Background-Top.jpg'), url('WC-Background-1px.jpg'), url('WC-Background-Bottom.jpg');
   background-position: top, middle, bottom;
   background-repeat: no-repeat, 开发者_如何学Pythonrepeat-y, no-repeat;
}

Divide your page up using <div> tags, and apply the pertaining image to each <div>'s background-image property. This way, you can specify differing property values for background-repeat.

You could create three separate divs with separate backgrounds specified for each.

#topContainer{background: url('WC-Background-Top.png') no-repeat; }
#midContainer{background: url('WC-Background-1px.png') repeat-y; }
#bottomContainer{background: url('WC-Background-Bottom.png') repeat-y; }

This, I believe, is the most valid way to do what you want.

Add to those the other styles you mentioned. If you want these to fall outside the flow of other elements, consider giving them position:absolute.