Add big background image to links without empty tags

I'm developing a Drupal 7 theme, and I'd like to add a big background image to each main menu link but without using a empty tag.

You can s开发者_运维问答ee a basic layout in this image.

The red triangle is attached (background) to link1, and the orange one is to link2.

I'd do this in this way:

<ul>
   <li><a href=#>Link1<span id="bgimage_link1"></span></a></li>
   <li><a href=#>Link2<span id="bgimage_link2"></span></a></li>
</ul>

But I wonder if it can be accomplished in another way, without using a empty tag.

Thanks all!

UPDATE: This is what I'm trying to do (but without empty tags!)

I'm not sure if this has something to do with Drupal 7, but what is preventing you from doing:

<li><a href=#><span id="bgimage_link1">Link1</span></a></li>

Do you want the background image to be a clickable part of the link or no? If no, could you do:

<li><span id="bgimage_link1"><a href=#>Link1</a></span></li>

If yes, why can't you just put the background image on the <a>?

<li><a id="bgimage_link1" href=#>Link1</a></li>