Having two backgrounds for an active menu item?

Question

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.com/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 :(

Answer 1

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

Answer 2

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.