Transparency Question

[Aspire]

I don't know if this is possible. It seemed brilliant when I first thought of it.

 

I wanted to put a gif as the background image of my sidebar. It is a gradient that fades from light blue at the top to transparent at the bottom. Since the container background is dark blue, I hoped the sidebar would be light blue at the top and dark blue at the bottom (container color showing through). It worked a bit, but instead of a smooth gradient, I have a noise gradient at the bottom. Not what I was looking for.

 

Is there a way to do what I want? Thanks for any input.

[falkencreative]

Either I'd use a .jpg without transparency, that fades into the same color as the container background, or I'd use a transparent PNG. Gradients and .GIF files don't usually mix very well -- they result in low quality results.

[Aspire]

Thanks for suggesting .png. I didn't know how well that format would work. I will definitely try the gradient fading to background color image.

 

None of that would be necessary if I could figure out how to get the sidebar and the main content boxes to be exactly the same height as each other!

 

I appreciate your reply. You are always so helpful.

[BeeDev]

It worked a bit, but instead of a smooth gradient, I have a noise gradient at the bottom. Not what I was looking for.

 

Just export that gradient image as transparent PNG, instead of GIF. That should do the trick.

[sarina28]

I use png graphics a lot on my sites. They work great, but IE6 does not support them. The transparent areas will appear solid white. We shouldn't really care about that old of a browser, but some people still use it.

[falkencreative]

If you need to support PNGs on IE6, you can use the Belated PNG fix: http://www.dillerdesign.com/experiment/DD_belatedPNG/

[sarina28]

I could of used that png fix on some earlier websites.