I've done this several times: http://www.dnnstyle.com/retro/Skins/MainHeader4.aspx and http://www.dnnstyle.com/fashion/Home.aspx. So, it can definitely be done. I'd imagine different widths for root items would be easy enough by not setting a width, and applying float: left with a clear: both to render the horizontal menu items vertically without using the vertical menu option (which I believe by default applies a uniform width if remembering correctly). Then you could set a background image to repeat and set an outside border via css to each item. Separating the items can be done with a margin setting instead of padding, though when I did that I was not able to separate menu items in the submenus with a margin, only in the root menu. The submenu I just set a bottom border to simulate a space. DNN Nav is evolving, slowly but surely, into something that can handle more complex design needs. Still a ways to go, but progressing.
Anyway, when I did this, I set up a default root menu item style via ".mainMenu .root.mi" with all the width, padding, margins, font settings, etc in that default. And then to override the background, you simply add below that ".mainMenu .root.mi.m0" and just add the custom background settings there. Although, to be honest, in your case I don't think you'd necessarily need to have separate background settings for each root menu item if, again, you use a horizontal rendering of the menu, don't set the menu item width, and apply a float left with clear both to trick it into rendering vertically by forcing each menu item to a new line via the floats and clears.