Question

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. (Which 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!

Answer 1

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