HTML CSS, A et background image

Bonjour,

JE m'embrouille complètement

ce que je veux, c'est mettre une image sur mes liens "MenuBarItemSubmenu" mais juste une couleur sur les liens qui ne sont pas classés.

Mon HTML =

<ul id="MenuBarre" class="MenuBarHorizontal">
<li><a href="#" class="MenuBarItemSubmenu">Accueil</a>
                <ul>
                  <li><a href="#">Actualités</a></li>
                  <li><a href="#">Blabla</a></li>
                </ul>
              </li>
<li><a href="#" class="MenuBarItemSubmenu">CERA</a>
            <ul>
              <li><a href="#">L'équipe</a> </li>
              <li><a href="#">Le Savoir-faire</a></li>
        </ul>
          </li>
 </ul>

et ma CSS qui est un vrai foutoir =

ul.MenuBarHorizontal
{
	margin: 0;
	padding: 0;
	list-style-type: none;
	font-size: 100%;
	cursor: default;
	width: auto;	
	height: 20px;
}
ul.MenuBarHorizontal a
{
	display: block;
	cursor: pointer;
	background-color: #facade;/* si je change ici pour fond image, tout mes boutons ont l'image... ;*/
	padding: 0.5em 0.75em;
	color: #333;
	text-decoration: none;
}
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
{
	background-color: #0C0;
	color: #FFF;
}
/*ce qui suit c'est pour les sous-menus*/
ul.MenuBarHorizontal ul a
{
	background-color: #EEE; 
	color: #333;
	height: 10px;
	font-size: smaller;
}
ul.MenuBarHorizontal ul a:hover, ul.MenuBarHorizontal ul a:focus
{
	background-color: #199;
	display:block; 
	color: #FFF;
}

j'ai l'impression d'avoir tout esayé, rien à faire, pas moyen de mettre ca :

background-image:url(../../images/boutons/bouton-fond.jpg);

merci de m'aider !