This is a simple question, but I can't remember the solution. On http://www.sullens.net/~mthomas/cins257/demos/test.html how do I change the width of the logo? If I change the width in photoshop, it distorts the image. I know there's a fix, I just can't remember it.

Be sure to have "Constrain proportions" checked in the dialog box in PS. Then if you type the width, the height will change accordingly to retain the image aspect ratio.

that's not working. if I set the width what I want then it's too tall

Then, the base aspect ratio (i.e. height vs width) of the original image is the problem. You may want to go back and examine the the logo design.

can you explain that in a different way?

I'm not sure I understand what you're trying to do. Are you trying to resize the "New Image Salon" part of your logo.jpg image? Are you trying to resize your logo.jpg image? Are you trying to expand the "background" part of your logo.jpg image while keeping the "New Image Salon" part the same size? Or are you trying to do something else?

I'm trying to resize the logo.jpg so it comes across the top of the page more.

Can you show us your best attempt at resizing logo.jpg ?

On http://www.sullens.net/~mthomas/cins257/demos/test.html the width is where I want it but the height needs to be a fourth of what it is

But then it will be distorted.

That has been the problem all along , hence why I'm asking for help

Personally, I'd split the "New Image Salon" part from the scrollwork. I'd put the "New Image Salon" part in an img element, with the scrollwork as part of the background image. Actually, maybe two background images: A non-repeating one at the top with the scrollwork, and a repeating one behind it that extends the basic textured background to the full display area.

I apologize, I think you're thinking of my original idea. I changed my mind, I'm not having the logo.jpg as a background image. I want the logo to be at the top of the page if that makes sense

Crop it to the proportions you want then.

I don't think that will work, will it?

How was the image created in the first place? Don't you still have a .psd copy of the image, composed of layers (one for the bkg color, one for the swirl, one for the text bkg and one for the text)?

My client gave me the brochure and I scanned it in - I don't have a "true" logo file. I'm hoping I can get a good copy of that file.

I might be making some progress. Is it too big or too grainy now?

I agree, it doesn't really look too well. You might ask them for the original images of the brochure, preferably in .psd. Or find a PS brush for that swirl and recreate the image at the desired size.

Does the logo need to be exactly like the scan? I think you could easily achieve a similar look using text, like so:



If you need more decoration, perhaps, a repeating background texture would do. There are many free sites out there just for this reason, like Absolute Background Textures Archives.

Also you can get really fancy with css. Here is food for thought take a look at these fancy css photo frames: CSS Image Frames Style Tutorial.

The problem is that your image file's dimensions are different from the height and width assigned on your <img> tag in the html.

There are several things you can do...

1) Figure out what dimensions you actually want to show the image at online. Recut your photoshop file to resize it to exactly those dimensions. Then change the height and width on the image tag to be identical to the actual size of the image, i.e. <img width="300" height="322" src="assets/logo.jpg">

2) Use css to target the image and give it height and width there, i.e. #logo img {width: 300px; height: 322px;}
a) You can also use {width: auto; height: auto;} to let the image's natural size show through.
b) You can also use {width: 300px; height: auto;} or {width: auto; height: 300px;} and replace the 300px with any other size, in which case the browser will fit the image to the specified size, and then scale it so it's the right shape.

3) If you want to store the image at a large size, but then crop it so the entire thing doesn't show up on your webpage, you need to set the size of the image as mentioned above, so that the img is rendered at its natural aspect ratio. Then you can crop the image by using its container div to only show a portion of it, i.e.
#logo img {width: 300px; height: 322px;}
#logo {height: 100px; width: 300px; overflow: hidden;}
/* and if you want to position the image so that the top of it is above the #logo div (and therefore is cut off), you can add the following */
#logo img {margin-top: -100px;}