[css3-background] Adding a second background-image without overwriting the first one?

Dear list, today I have some request for a problem/flaw of the specs:

How do I add a second or third background-image to an html-element that already has some background-image?
I of course want to do this without overwriting the background-image that was there in the first place?
I want to add this second image.

Example:
-------------
<style>
      nav ul li {
            float: left;
            padding: 0 0 0 15px
            margin: 0 20px 0 0;
            background: url("bullet.png") left center no-repeat;
      }

      nav ul li.selected {
            background: url("pointer.png") center top no-repeat;
      }
</style>

<nav>
      <ul>
            <li><a href="about.html">About</a></li>
            <li class="selected"><a href="projects.html">Projects</a></li>
            <li><a href="blog.html">Blog</a></li>
            <li><a href="contact.html">Contact</a></li>
      </ul>
</nav

Testcase:
-------------
We have some nice horizontal main navigation. Let's say each of these list elements has a particular icon as a bullet-point replacement according to its reference. This icon is classically positioned "before" the content of the list element, that has some padding-left.

Problem:
-------------
If we want to add second background-image onto one list element, in order to indicate that this has been selected - lets say an pointer/arrow on top of the content list element (here "projects") - the first bg-image would be overwritten.

Of course I can work it out with some extra container or putting the additional image onto the anchor inside the list element, but this is what we wanted to eliminate with multible backgrounds, right?

How do I solve this situation?

Thanks in advance
~ Dennis

Received on Tuesday, 20 December 2011 22:25:48 UTC