Petit ennui d'image de fond

Bonjour, je débute en css et j'aimerai aménager a ma facon un bout de code tout simple que j'ai recupéré sur un site de tuto.
Il sagit d'une menu déroulant vertical constitué de 5 groupes et d'un lot de petits groupes affichés lors du clic. tout ceci fonctionne assez bien, mais j'aimerai pouvoir mettre en background de chaque groupe (<dt>) une image différente

l'ennui se situe au niveau du css qui n'accepte pas le background-image : url() lorsqu'on le loge dans la definition d'un dt, que faire ? je pourrais aussi tout refaire en javascript avec un simple tableau mais le but est d'apprendre le css,

merci d'avance

    <dl id="menu">

		<dt id="menu1" onclick="javascript:montre('smenu1');"><a href="#"> Accueil</a></dt>
			<dd id="smenu1">
				<ul>
					<li><a href="#">Sous-Menu 1.1</a></li>
					<li><a href="#">Sous-Menu 1.2</a></li>

					<li><a href="#">Sous-Menu 1.3</a></li>
				</ul>
			</dd>	
			
		<dt id="menu2 onclick="javascript:montre('smenu2');"><a href="#">Ev&#234;nements</a></dt>
			<dd id="smenu2">
				<ul>
					<li><a href="#">Sous-Menu 2.1</a></li>
					<li><a href="#">Sous-Menu 2.2</a></li>

					<li><a href="#">Sous-Menu 2.3</a></li>
				</ul>
			</dd>	

		<dt id="menu3 onclick="javascript:montre('smenu3');"><a href="#">Nos artistes</a></dt>
			<dd id="smenu3">
				<ul>
					<li><a href="#">Sous-Menu 3.1</a></li>
					<li><a href="#">Sous-Menu 3.1</a></li>

					<li><a href="#">Sous-Menu 3.1</a></li>
					<li><a href="#">Sous-Menu 3.1</a></li>
					<li><a href="#">Sous-Menu 3.1</a></li>
					<li><a href="#">Sous-Menu 3.1</a></li>
				</ul>
			</dd>

		<dt id="menu4 onclick="javascript:montre('smenu4');"><a href="#">Partenaires</a></dt>
			<dd id="smenu4">
				<ul>
					<li><a href="#">Sous-Menu 4.1</a></li>
					<li><a href="#">Sous-Menu 4.1</a></li>
				</ul>
			</dd>
			
		<dt id="menu5 onclick="javascript:montre();"><a href="#">L&#8217;&eacute;quipe</a></dt>
	
</dl>

dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
dl#menu {
width: 170px;
}
dl#menu dt {
cursor: pointer;
margin: 0px;
height: 40px;
line-height: 3em;
text-align: center;
font-weight: normal;
font-family : Trebuchet MS;
font-size : small;
border: 0px ;

}
dl#menu dd {
border: 1px solid gray;
}
dl#menu li {
text-align: center;
background: #fff;
}
dl#menu li a, dl#menu dt a {
color: black;
text-decoration: none;
display: block;
border: 0 none;
height: 100%;
}

dl#menu li a:hover, dl#menu dt a:hover {
background: #ffd2aa;
}

Pourquoi les images de fonds ne fonctionneraient-elles pas avec sur les balises dt ?

c'est bien la question que je me pose, dans l'exemple présent, si j'affuble le

dl#menu dt {
cursor: pointer;
margin: 0px;
height: 40px;
line-height: 3em;
text-align: center;
font-weight: normal;
font-family : Trebuchet MS;
font-size : small;
border: 0px ;
}

d'un background-image: url("babar.png");

va savoir pourquoi, il ne réagit pas ( en admettant bien sure que l'ami babar soit présent dans le répertoire racine ^^)

Bonjour,

Chez moi (IE6, 7 et FF) ça marche avec ... un jpg ou un gif !!