Images in Son of Suckerfish menus (CSS and HTML)

[ididntdoit]

I want to add a background image to my menu items. It doesn't have to change when hovered over or anything fancy, just a back image. I can't figure out how to do it. Can anyone show me?

Also - I was wondering if there's a way to add a small picture beside (but within) each menu item. For example, my link to Linerider may have a small guy on a sled next to the word Linerider. Is this possible? I was thinking maybe something like assigning an ID to each li one for the text one for the image, then show each on the same row right beside each other.

If you can help me with one and not the other, that's great. I would like the second one a lot, but the first would be nice too.

I attached my main page as well my CSS.

[ididntdoit]

Well, I'm using Dreamweaver, and it gave me the following scripts for a rollover image, but this also make the before AND rollover image as a new list item. How can I make the text on top?

function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
 
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
 
function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}
 
function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}

<li><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('mid','','GUI/black_button_small_over.gif',1)"><img src="GUI/black_button_small.gif" width="125" height="26" border="0" id="mid" /></a><a href="pictures">Pictures</a></li>

[ididntdoit]

OK, I've found the solution to the first part (background image) and I'll post it once I get it a bit neater, but does anyone know a way of putting TWO list items into 1 menu item using Son of Suckerfish menus?