Curved corners and expanding tcat background

[veenuisthebest]

[tcat_left.png X 1]**********[tcat_repeating.png X n]**********[tcat_right.png X 1]


What I want is to put a repeating background image for .tcat class. How do I put one curved image at the left and one curved image on the right for tcat background? I have my images ready, just not able to understand how to fix them up via CSS.

I want to achieve something like below. But how do I do this using just the Extra CSS Attributes field box, so that I do not have to edit templates.

.tcat_left {
background: url(../../images/gradients/tcat_left.png) no-repeat top left;
}

.tcat_bg {
background: url(../../images/gradients/tcat_repeating.png) repeat-x top left
}

.tcat_right {
background: url(../../images/gradients/tcat_right.png) no-repeat top right;
}

Thanks