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

MC
Posted By
Martin_Coleman
Jun 29, 2007
Views
245
Replies
2
Status
Closed
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;}
Related Tags
background how html image prepare size use

Master Retouching Hair

Learn how to rescue details, remove flyaways, add volume, and enhance the definition of hair in any photo. We break down every tool and technique in Photoshop to get picture-perfect hair, every time.

MC
Martin_Coleman
Jun 29, 2007
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
MC
Martin_Coleman
Jun 29, 2007
And the URL changed

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

Thanks

Martin

Master Retouching Hair

Learn how to rescue details, remove flyaways, add volume, and enhance the definition of hair in any photo. We break down every tool and technique in Photoshop to get picture-perfect hair, every time.

Related Discussion Topics

Nice and short text about related topics in discussion sections