CSS3 supports multiple background images, for example:

foo { background-image: url(/i/image1.jpg), url(/i/image2.jpg); }

I'd like to be able to add a secondary image to an element with a class though.

So for example, say you have a nav menu. And each item has a background image. When a nav item is selected you want to layer on another background image.

I do not see a way to 'add' a background image instead of redeclaring the whole background property. This is a pain because in order to do this with multi-backgrounds, you would have to write the base bg image over and over for each item if the items have unique images.

Ideally I'd be able to do something like this:

li { background: url(baseImage.jpg); }
li.selected { background: url(selectedIndicator.jpg); }

And have li.selected's end result appear the same if I did:

li.selected { background: url(baseImage.jpg), url(selectedIndicator.jpg); }

Update: I also tried the following with no luck (I believe backgrounds are not inherited..)

li { background: url(baseImage.jpg), none; }
li.selected { background: inherit, url(selectedIndicator.jpg); }