How to use three background images in a single div to emulate a shadow

I am building an accordion menu who开发者_运维技巧's height changes when menu elements are opened/closed, and want a shadow on the side of the menu.

I have three images to use as background images to emulate the shadow effect (one each for the top and bottom, and one for the middle which will be repeated in the y dimension). Currently I have set a background image for the top left, and bottom left, but can't figure out how to make the middle shadow repeat to fill the gap.

Any suggestions?

background: url('/devassets/content_shadow_top.png') left top no-repeat,  url('/devassets/content_shadow_bottom.png') left bottom no-repeat;

CSS Shadows

    /*  Box Shadow, To Do: IE hack using filters */
    -moz-box-shadow: 2px 0 3px #000, -2px 0 3px #000;
    -webkit-box-shadow: 2px 0 3px #000, -2px 0 3px #000;
    box-shadow: 2px 0 3px #000, -2px 0 3px #000;

There's no reason to use images unless your shadow is really really complicated.

More info at css-tricks.

You can accomplish this with extra markup. Create a new element to contain each of the images, and position them as necessary to achieve the effect.