Multiple background images positioning

Your problem is that the repeat-y is going to fill the whole height, no matter where you position it initially. Thus, it overlaps your top and bottom.

One solution is to push the repeating background into a pseudo element positioned off of the container by the 12px at the top and bottom. The result can be seen here (the opacity in the demo is just to show that there is no overlap going on). Without opacity, see here. The relevant code (tested in CSS3 browsers: IE9, FF, Chrome):

CSS

div {
    position: relative;
    z-index: 2;
    background: url(top.png) top left no-repeat, 
                url(bottom.png) bottom left no-repeat;
}

div:before {
    content: '';
    position: absolute;
    z-index: -1; /* push it to the background */
    top: 12px; /* position it off the top background */
    right: 0;
    bottom: 12px; /* position it off the bottom background */
    left: 0;
    background: url(middle.png) top left repeat-y;
}

If you needed or wanted IE8 support (which does not support multiple backgrounds), then you could put the top background in the main div, and put the bottom background in by using the div:after pseudo element positioned to the bottom of the container.

If you can add padding/borders to the block equal to the backgrounds you want to position without overlapping other block, you can use the background-clip & background-origin to position the top and bottom backgrounds over the paddings/borders, and the repeating background over the content/paddings+content.

Here is an example: http://dabblet.com/gist/2668803

For your code, you'll possibly need to add something like this:

padding: 12px 0;
background-clip: padding-box, padding-box, content-box;
background-origin: padding-box, padding-box, content-box;

or

border: solid transparent;
border-width: 12px 0;
background-clip: border-box, border-box, padding-box;
background-origin: border-box, border-box, padding-box;

And you'll get what you need. If you can't get the paddings/borders, the pseudo-element like ScottS mentioned would work perfectly.

Try do it like this:

 background: url(PICTURE.png) left top no-repeat, url(PICTURE2.png) right bottom no-repeat, url(PICTURE3.jpg) left top no-repeat;
    }

EDIT: Was just an example, but here's the css with your css:

background: url(top.png) left 0px top -12px no-repeat, url(middle.png) left 0px top 0px repeat-y, url(bottom.png) left 0px bottom -12px no-repeat;
        }

I actually found a simpler fix, because I was having this same issue with a horizontal navigation.

Rather than adding code like the other answers you just have to list it differently in your CSS. The center image that repeats needs to be listed last, not first or second.

In my code it looks like this:

background-image: url(../images/leftNav.gif), url(../images/rightNav.gif), url(../images/centerNav.gif);
background-position: left, right, center;
background-repeat: no-repeat, no-repeat, repeat-x;