Having two backgrounds for an active menu item?

Hi I have a dynamic menu where the ul li items change in width depending on the text set in the CMS (Joomla). They want the menu item, on mouse over, to both have 1. a repeated background image and 2. an image placed at the top (http://screencast.c开发者_开发技巧om/t/Zjk4YTJmNGQ).

Now, I'm great with doing the repeated background image on a mouse over and that would be great, but I am not sure how to get both of these images in one css declaration.

Any help would be greatly appreciated, as I haven't learned this technique yet :(

---

If it's a menu, the relevant markup should probably resemble <li><a href="…">…</a></li> — that's two elements, which is plenty for two background images.

---

Firefox 3 and Webkit browsers support multiple backgrounds.

background: url(image1.png), url(image2.png);
background-repeat: repeat-x, no-repeat;
background-position: top right, 90% 5px;

You could also try to get this working by using the :after pseudoclass.

.menu li {
    position: absolute;
    background: url(image1.png);
}

.menu li:after {
    content: '<img src="image2.png">';
}

You can find a nice example here: http://s3.amazonaws.com/nettuts/690_textGradients/index.html