How can I do this?

[Jet]

As you can see from the picture I have a light blue div which stretches 100% of the screen above the navigation bar. I have a rollover logo on top of that which changes colour as you hover (using the change background position) but in order to have the background of the logo transparent I had to use a gif and as you can see the quality has suffered a lot.

I'm using Photoshop CS2 to produce the logo.

Is there something I can do in Photoshop to smooth the font down?

Or is there a better way of doing it using CSS and HTML, etc.

If I used a jpeg or PNG I would have to have the background of the logo the same as the div banner and it probably wouldn't match would it?

And if I used an image for the whole logo and banner it wouldn't look right on a large screen at 100%..

Any ideas guys?

 

[tsinc80697]

you can use an image without a background, ie create the text but no background on it, save it as a PNG and it will be transparent, so when it is placed on the background it will have that background perfectly.

However this doesn't work in all browsers, i think IE6 just sticks some white murky colour as the background as it doesn't handle PNG transparency.

 

[BillytheImpaler]

However this doesn't work in all browsers, i think IE6 just sticks some white murky colour as the background as it doesn't handle PNG transparency.

.gif transparency is handles nicely in most all browsers. It, however, doesn't support fancy anti-aliased transparency. That's is .png's main advantage.

 

[Brizzles]

PNG :

GIF :

Mark

 

[Jet]

PNG :

Mark

Yeah that looks great and exactly what I want but i'm reluctant to use it because IE6 is the majority browser, you know. Does anyone have a picture of what a transparent PNG looks like in IE6?

Might have to have a rethink. Is that the best quality I can get that GIF? I don't have a lot of experience with photoshop.

Cheers for the help so far though. I've learnt loads from this forum.