Hi SandyMc,
Sorry for the delay, we are usually able to respond within 24 hours but it can often times be a bit longer depending on how busy the forums are (and they are very busy lately).
Using an image in place of a menu item won't really work with this kind of layout as its all css based. It would take quite of specific tweaks to get each item replaced by an image and it would need to be adjusted whenever you changed the menu even slightly.
Instead what you could do is use a single slice of that image and then repeat it across the whole background and then make the text links white so that they can be seen on top of the purple gradient.
So try adding the following CSS to your Quick CSS (located under the Styling Tab in the theme options) or the custom.css file in the css folder of your theme files:
#top .main_menu .avia_mega {
background: URL(http://pizzazzgifts.com/temp/wp-content/uploads/2012/06/Home-Button.jpg);
.main_menu .avia_mega > li:hover > a, #top .main_menu .avia_mega > .current-menu-item > a {
background: URL(http://pizzazzgifts.com/temp/wp-content/uploads/2012/06/Home-Button-hover.jpg);
}
Just replace the URL to the new one that is just a 2-3 pixel slice of the purple gradient and the same for a hover image (maybe the same gradient in reverse). Then add the following for the link color:
.main_menu .avia_mega a {
color:#FFF;
}
Regards,
Devin