The definitive way to do tabs that use a background image (for rounded corners, fancy gradients, etc.) and yet still have the ability to resize for different text widths has already been worked out and explained. The technique is called Sliding Doors. My goal was simply to apply that technique to Plone.

The first step was to modify the CSS code in the example given to work with Plone. The Sliding Doors example assumes your tabs are wrapped in a div with a particular ID. I changed it to remove the div requirement and use the ID already assigned by Plone.

There were some minor CSS changes to make to cancel out some inherited properties from the existing Plone stylesheets, but that was just a little troubleshooting.

The next step was to shift style attributes from the CSS to the base_properties sheet in Plone. This makes it easier for someone to adapt the tabs to their site.

The last step will be to create a translucent gradient tab, so it can be used with different colors simply by setting a base_property.