How to Prepare (size) an image to use as a background in HTML

I can do the easy bit, and here is the proof:

www.imagesandwords.org.uk/Michele/pages/contact1.html

I think you can see what I want to do. I would like the three fieldset tags to have a background image that would appear to be a single image. I would settle for the same image in each.

I can't work out how to size the image and and have already noticed that if you fill up the fieldset the backgrount goes up behind the legend. I wonder if it might end up just being a trial and error thing but is there a way that PSCS2 can help me?

Any suggestions?

I did post this on the web design board as well.

Regards

Martin.

Here's the CSS for the fieldsets:
#fsone /* - stlyes the three fieldsets - */
{
background-image: url("Site_Images/keyboard1.jpg"); background-repeat: no-repeat;
background-position: center;
margin-top: 20px;
margin-right: 6px;
width: 258px;
height: 278px;
float: left;
}
#fstwo
{
float: left;
width: 258px;
height: 130px;
margin-top: 20px;}
#fsthree
{
float: left;
width: 258px;
height: 130px;
margin-top: 15px;}

Oh, I've done it!

I just did a single colour .gif in Photoshop and kept resizing and save optimised until I had a fit. Then I used those dimensions to make a jpeg from the keyboard image.

But it doesn't look as nice as I thought it would?

Regards

Martin

And the URL changed

<http://www.imagesandwords.org.uk/Michele/pages/contact.html>

Thanks

Martin