multiple background CSS3 button (+transparency)

Question

This is the code I have so far:

background: none;
background-image: url(../images/red-button-bg-left.png), url(../images/red-button-bg-tile.png), url(../images/red-button-bg-right.png);
background-repeat: no-repeat, repeat-x, no-repeat;
background-position: 0 0, 19px 0, 100% 0;

The button looks like:

[left corners image][body image][right corners image]

Normaly my code would work, but, in this case the url(../images/red-button-bg-tile.png) goes beneath left and right images and since it is transparent, messes up the button style.

What's the trick?

Answer 1

Set a transparent left and right border the width of your left & right corner image and use background-clip:padding-box; for the tiled background only. If this sounds unclear, I'd be happy to edit a fiddle you provide.