Is it possible to have a transparent photoshop image render in CSS? I tried saving as jpg and gif with transparency selected but when I overlay it in css it shows the background color behind it and not the image which is under it. I played with the z-index and it didn't help.
Thanks
JPEG images do not support transparency.
You need to save the image as a PNG file, which does support transparency.
If you need to support IE6, you'll also need to use the filter proeprty.
As SLaks pointed out, use a PNG image file for this. JPEG won't do, I am not sure why GIF wouldn't work...
I took a look at a project I was doing involving some translucent background and its CSS, and this is what I found:
background-image: url(../images/translucent_white.png);
So it really is that simple. Just save your picture with transparency as a PNG.
You need to save it using an image format that supports the type of transparency that you want. The JPEG format doesn't support transparency at all.
There are two types of transparency, transparency index and alpha channel. The GIF and PNG-8 formats support transparency index, i.e. one of the 256 colors are chosen to represent transparency. That means that each pixel in the image can only be either 100% transparent or 100% solid.
The PNG-24 format support alpha channel. That is transparency value for each pixel, so that it can be anything from 100% transparent to 100% solid (in 256 levels).
If your image has mostly fully transparent or fully solid pixels, you can use transparency index, but if it has a lot of partly transparent pixels, you have to use alpha channel.
Note that older versions of IE has problems displaying the transparency in PNG-24 images correctly.
First, have a transparent background (as in no background) as the first layer of your photoshop file. Be sure it has grey and white squares in the background, which means it is transparent. When you're ready to save, go to the File Menu, and hit Save for Web Select the PNG file format and be sure it has "Transparency" checked. Just press SAVE and give it a name and that photoshop image will be saved into a transparent background PNG file which presents more colors, and it's smaller than a GIF file and is as good as a jpg.
You need to save it as a .png file as mentioned but this is tricky when it comes to IE6. It depends on if the image you have is using a gradient that transistition to the transparency. For instance a shadow.
If you have an image that has a shadow (or any gradient) than you are best off using a .png but this will now work for IE6 and you should follow the advice of SLaks. In my experience though I stay away from javascript fixes like this and just choose to save the image w/ the desired background.
If you do no have a gradient then the .gif is the way to go as it will be supported in all browsers.
I recommend using a .gif filetype; it supports transparent backgrounds and works in most cases. .jpgs don't support transparent backgrounds at all. .pngs support nice alpha-transparent backgrounds, but not in IE6. (Using the AlphaImageLoader filter can cause page slowdown and browser crashes.)
First off, make sure that your image has a transparent background in Photoshop - often a white and grey checkerboard. Then, choose "Save for Web" (or something close to that, it varies in different versions) from the File menu, choose whatever GIF preset works best, and be sure that "Transparency" is checked.