Add the background image to your Fireworks document and export again.
And how exactly I do that?
I tried to open the image and then I dragged the button onto it and then I exported. But all I got was either an image with a dead button or a good working button without almost anything.
I finally succeeded, sort of...I dragged the button on to a .jpg image and then I SAVED the document as FW .png file and then I reopened it and then exported. And it works fine in a browser, BUT...now I have a whole bunch of small images (slices probably). And I don't need them. When I try to export the file without slices, then nothing works again. I just want to have a file as a as piece, so I can upload it to the server and use it in Joomla articles.
P.S. I tried to upload all the slices to the server, but in Joomla they're not together as one piece, looks like a mozaic of few separate images. Though rollover button with a small piece of bg image works fine.
First, when you save from Fireworks, you get a Fireworks document .png, complete with layers, vector objects, and all the other various complex definitions Fireworks can support. Fireworks is the only program that can interpret this information. Any other program (such as a browser) can display what the document looks like, but it's probably much larger than it needs to be for the Web. For Web use, you want to export an image (.gif, .jpg, or one of the bitmap .png variations). Be careful when you export an image to a bitmap .png format that you do not use the same name as your master FW document and overwrite your FW document.
Second, DW is not a layout program. In order to create HTML files, you probably ought to learn a bit about HTML. I recommend you work through one or both of these tutorials:
Content blocks can have properties., One of the properties is a background image. If you want to have a page background, then you need to create an image, export it from Fireworks, and then set it as the background for the body section of the page. That image is then behind all the content blocks you define within the body section: buttons, paragraphs, other images, tables, anything. Most of these other elements can also have background images defined, too.
Fireworks produces images that are defined by what's visible as well as any active slices (such as those created by buttons). When you exported your background image with a button, Fireworks gave you an HTML table (one of the many kind of content blocks) because the button defined slice regions. Fireworks can't "know" that you really wanted a background image and then the HTML to put a button in a certain location on a page. It created the images you defined (but not what you wanted).
It seems to be OK now...I just had to use Custom HTMLmodule and not incorporating the image comp into an article. Though in Safari and IE8 I have a strange small dot about an inch above the image, but in Firefox it doesn't show.