Yes, it will work with BG images.
You need to place the transition rules on the <a>, not the <li>. Then place whatever is to change on your a:hover rules.
What i'm trying to do is get the background image on the hover to fade in over the top of the original.
The problem I see is that you are loading a new image on hover, that will give some delay and conflict with the transition timing. You will be much better off merging the two states together into one sprite image and then just changing BG positions on hover. That should give you the effect your after without any loading delays.
Here is an old demo I put together a while back when I was testing with transitions.
View the page source and you will see the transition rules on the anchor, then a BG color gets added along with an increase in width on hover.