Making the background of an image completely see-through

[Accipiter22]

OK, so I have a webpage with a picture for a background (actually it's a gradient, but still)...the problem is that the logo for the website goes at the top and does not follow the gradient. The background is a dark gray color and it looks awful. How do I make it so that only the writing for the logo shows up and the background image I use for the website shows up??

 

[gregor7777]

Transparency? .png files can handle that. just have the writing over a transparent background in Photoshop and save as a .png file.

Does that help?

 

[troytime]

Originally posted by: gregor7777
Transparency? .png files can handle that. just have the writing over a transparent background in Photoshop and save as a .png file.

Does that help?

better stick to gif, ie6 doesn't support transparent png

accipter, in photoshop, erase the background of the image (it should look like a gray/white checkerboard)

then Save For Web, checkmark "transparency" on the right

 

[Accipiter22]

Originally posted by: troytime

Originally posted by: gregor7777
Transparency? .png files can handle that. just have the writing over a transparent background in Photoshop and save as a .png file.

Does that help?

better stick to gif, ie6 doesn't support transparent png

accipter, in photoshop, erase the background of the image (it should look like a gray/white checkerboard)

then Save For Web, checkmark "transparency" on the right

thanks!

 

[Aikouka]

Personally, transparent GIFs tend to look awful. Depending on how your website is setup, you can make it so the gradients will match via setting offsets to a proper value as normally people have issues because webpages (by default) use paddings. If I want to start in the upper left corner, I typically set my paddings to 0 so I literally start in the upper left and not 10 pixels (or whatever) off.

 

[troytime]

Originally posted by: Aikouka
Personally, transparent GIFs tend to look awful. Depending on how your website is setup, you can make it so the gradients will match via setting offsets to a proper value as normally people have issues because webpages (by default) use paddings. If I want to start in the upper left corner, I typically set my paddings to 0 so I literally start in the upper left and not 10 pixels (or whatever) off.

the quality deciding factor is often the graphic itself, not the format

a higher res graphic with smooth crispy edges can be shrunk down and put into a transparent gif without any problem

serif fonts, sharp edged graphics can't usually be shrunk down and made transparent

 

[LeetestUnleet]

Another transparency method I've had more success with in Photoshop (it looks a little cleaner to me) is to "fill" the parts you want transparent with whatever color they'll be transparent against. Then click "Save for Web", find that color in the hex palette and click the "Make Transparent" button (or whatever it's called). It removes that color from the image and makes it transparent, and even on the pixels that don't go transparent well are similar enough in color to the background against which it'll be on that you can't really tell.

Hope that makes sense

 

[skrilla]

Originally posted by: Aikouka
Personally, transparent GIFs tend to look awful.

I agree with you here. For a small or simple image they work, but for a larger image or one with a shadow or rounded corners, etc... they can get ugly. It depends on the image.

Microsoft offers a "workaround" you want to use transparent PNG files for IE 5.5/6. Google "pngfix" or Alphaimageloader. It works good, but may not be suitable for everyone.

 

[Accipiter22]

hmmm i'll have to try those too