multiple background CSS3 button (+transparency)

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?

---

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.

---

The trick is to not use transparency on your end pieces. The easiest thing to do is make the transparent parts the same color as your main background. Your middle background is tiling through the whole thing, underneath the end images, thus showing through the transparent areas.

Since you're using CSS3 already (multiple backgrounds), depending on what your images look like, you could also switch to border-radius (or use it for your rounding and just make your background squared off, assuming the transparency is for rounding corners) and gradient backgrounds.

---

have you tried re-ordering the background values in css? e.g. put url(../images/red-button-bg-tile.png) either last or first and change position and repeats accordingly.