I'm new to the web designing stuff, so I bought a template. I want to change some text in my header. It is saved as a png image. I opened the PSD file in photoshop and changed the text.

I then moved that layer to a new file and saved it as a transparent file.

The resulting file is not displayed at the same size in my webpage. In the webpage, i have the image size set, but still the same result

Template(chainging text on top) template

Photoshop file (see proportions)


Resulting website website

What is causing this problem. Like I said, I took the text layer and put it in its own document where I could save it as transparent

  • 1
    This would probably be better fit question for stackoverflow. Try to open the image either inside the browser ( right click and show image ) or in an image viewing application and see if the image looks as it should? That would determine if your code is affecting the image, or if the image itself isn't ok. To me that looks like browser handling the resizing of the image. Do you have firebug? Get it. Learn to use it. Love it. You could inspect the image element in firebug and see what css affects that specific element.
    – Joonas
    Commented Jul 31, 2012 at 16:22

1 Answer 1


It looks like the image in your webpage may have an explicit width value set in HTML (or possibly in CSS), but you've made the actual image wider to fit the text. Thus it's being scaled down to fit the same dimensions as before.

If this is the case, you should correct or remove the width value. For this particular graphic element, I can't see a good reason for specifying it, particularly in HTML, but this may dependent on the exact layout.

  • I found the CSS causing this problem and fixed it
    – CSharpDev
    Commented Jul 31, 2012 at 17:22

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.