Adding text to button image

Am wondering how to add text to a background button image that I have set on my webpage. When I try to add the text thru DW the button background moves off the page. It is actually a set of 6 subheading buttons.jpg in various sizes. Thanks for your help

<div class="button" style="background:url(images/b3.jpg); width:203px;"><img src="b3.jpg" />
</div>


<div class="button" style="background:url(images/b2.jpg); width:221px;"> <img src="b2.jpg" alt="text" width="221" height="40" />

</div>

<div class="button" style="background:url(images/b1.jpg); width:135px;"><span class="button2"><img src="b1.jpg" name="Home" id="Home" /></span></div>
<div class="clean"></div>
</div>

<div id="left">
here is the code



how would I make one of the buttons really background buttons not the little gray boxes that you see sometimes. say Home.....and when someone clicks they are taken there
2 about us
3 why choose us



for example.......................

Im sure other people with have other ideas but I personally would use photoshop to open each button. add the text and save the jpeg.

This way IE cant balls up the positioning of the text as its attached to the image.

If they are links however, you will have to link the buttons themselves and not the text

You don't really want to have the text on the background image as then screen readers etc, not to say search engines, won't be able to read it.

A good approach is to create the link, and then use styling to set the background image to your photoshopped or whatever image.

So your html would look something like this, nice and clean:
<a href="whatever.htm" class="button">Text for this link</a>

with css like this (explanations in red):

a.button
{display:block;/* make the link a box, effectively */
width:203px;
height:30px;/* set the width and height as required - to match your background image*/
text-align:center;/* centre the text horizontally in the box */
line-height:30px;/* centre the text vertically in the box by making line-height = height*/
background: #000000 url(images/b3.jpg) no-repeat;/* black background if no image, image doesn't repeat*/
color:black;
text-decoration:none;/* remove the underlining on the link*/
}


Then you can define a similar class for each size button, changing the width, height and background image as required, and add the class to your html.