How to include 3 background images in a single css?

Here's a piece of my navigation code:

<? if($page == ""){ ?>  
    <li>
        <a href="<? echo $site;?>" id="on" style="background-image:url(images/logonav_onright.png) right no-repeat;">Home</a>
    </li>  
<? }else{ ?>   
    <li>
        <a href="<? echo $site;?>">Home</a>
    </li>   
<? } ?>

I want that #on to include 3 images basically:

1. With repeat-x. (Whi开发者_开发问答ch is actually the #on)
2. Left side of the nav button.
3. Right side of the nav button.

I tried some solutions I found online, although none seem to work. Is there a way to do it without wrapping each nav with 2 additional div tags?

Thanks!

There isn't a solution that doesn't involve adding more elements. Unfortunately, only one background image can be applied per element via CSS.

You would do it like so:

background-image: url(sheep.png), url(betweengrassandsky.png);
background-position: center bottom, left top;
background-repeat: no-repeat;

There's some more information on that here, but as a heads-up, it's a CSS3 property only.

I think what you want are CSS Sliding Doors.