[CSS]dwa obrazki tła? Opcje

[Stryku]

Witam. Mam problem i nie mam pomysłu jak mu zaradzić. Więc mam sobie menu na stronie, takie np.:

[HTML] pobierz, plaintext 
<div  id="menu">
		<div class="menu_item">
			glowna
 
		</div>
		<div class="menu_item">
			historia
		</div>
		<div class="menu_item">
			ranking fifa
		</div>
	</div>
[HTML] pobierz, plaintext 

css wygląda tak:

[HTML] pobierz, plaintext 
.menu_item
{
 
  background-image:url('obrazki/przyciemnianie.png');
  height:40px;
  font-family:Arial;
  cursor:pointer;
  padding-left:5px;
  padding-top:5px;
  font-size:30px;
  position:relative;
 
}
.menu_item:hover
{
  background-image:url('obrazki/pilka_menu.gif');
  background-position:right;
  background-repeat:no-repeat;
  padding-left:10px;
}
[HTML] pobierz, plaintext 

tyle, że css jest kaskadowy i jak najadę na jakiś menu_item to piłka się pojawia, ale normalne tło znika. w sumie to pomysł mam, żeby zrobić takie coś:

[HTML] pobierz, plaintext 
<div  id="menu">
		<div class="menu_item" onmouseover="overmenu('glowna_span')">
			glowna
			<span id="glowna_span" class="span_menu"></span>
		</div>
		<div class="menu_item">
			historia
		</div>
		<div class="menu_item">
			ranking fifa
		</div>
	</div>
[HTML] pobierz, plaintext 

[HTML] pobierz, plaintext 
.span_menu
{
  position:absolute;
  top:0;
  right:0;
  width:20px;
  height:40px;
  background:transparent;
}
[HTML] pobierz, plaintext 

i w javascripcie zmienić mu tło na tą pilka_menu.gif.

Tyle, że pewnie istnieje jakiś wydajniejszy i lepszy sposób, o który Was pytam (IMG:style_emoticons/default/smile.gif)
Z góry dzięki za pomoc.