Transparent PNG in background-image

[socken]

I'm trying to use transparent PNG in my CSS. I have seen a lot of different methods, but nothing really worked.
The main problem is, I want my background-image to be transparent. Most solutions on the net try to solve the problem only for <img> embedded images, not for background-images.

Does anyone have an idea??? :confused:

Oh, and of course it works in FF (like always :D ) but not in IE (like always :mad: )

[The Little Guy]

IE doesn't support transparent PNG's

http://www.webdeveloper.com/forum/showthread.php?t=114884

[socken]

Ahem...yeah, I know that! That's what I'm trying to do: Get a workaround...

I found this now, which is actually what I was looking for: http://allinthehead.com/retro/69/sleight-of-hand

only problem now, I do have <img> tags in my html as well as background-image in my css. CSS works great now, <img> tags don't.. maybe I'll just create some more div's then...

[bokeh]

IE doesn't support transparent PNG'sYes it does. What it doesn't support is PNG images with varying transparency (alpha channel).

[The Little Guy]

Yes it does. What it doesn't support is PNG images with varying transparency (alpha channel).

When ever I made a transparent PNG all I got was a blue area where it was supposed to be transparent.

[toicontien]

This should be working code to get alpha transparent PNGs to work in IE5.5 and 6. IE7 supports alpha PNGs natively.

#someId {
background: transparent none repeat-y scroll 0 0;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/bg_image.png',sizingMethod='scale')
}

/* For all others (including IE7, since it supports alpha transparent PNGs) */
html>body #someId {
background-image: url(/images/bg_image.png);
filter: none;
}

The pitfall with using the filter property to insert a PNG image is that you lose a lot of the controls you had with the background property. No more bg repeat, bg position and whether the image is fixed or not. The sizingMethod has three properties:

crop: The image is cropped to the size of the element that it's a BG image for

scale: The image is stretched to fill the element it's a BG image for

image: Default. Enlarges or reduces the border of the object to fit the dimensions of the image.

Alpha Image Loader (http://msdn.microsoft.com/workshop/author/filter/reference/filters/alphaimageloader.asp)
sizingMethod (http://msdn.microsoft.com/workshop/author/filter/reference/properties/sizingmethod_1.asp)

[bokeh]

When ever I made a transparent PNG all I got was a blue area where it was supposed to be transparent.You must have done something wrong then!

[toicontien]

Generally, if a transparent PNG isn't transparent, you need to save it as a 24 bit PNG file. If you're viewing it in IE-Win and it isn't transparent, that's because you need to use the alpha image loader I posted above.

[bokeh]

you need to save it as a 24 bit PNG file.I've read this before but don't see why. The transparent image I posted works fine in IE and is 8 bit.

[pathfinder74]

I got it working the way I want.... see
http://www.webdeveloper.com/forum/showthread.php?t=114905

It's a huge PITA adding that extra line of code for not only MSIE but also for FF, but it works like a frickin champ. I'm going transparent PNG crazy on this site I'm making. I think every graphic on it so far has some alpha channel sweetness in it.

(ps... don't steal my stuff :) )

[toicontien]

I've read this before but don't see why. The transparent image I posted works fine in IE and is 8 bit.
Must be Photoshop then :) They only way the Save For Web option allows for PNG transparency in Photoshop CS is to save it as a 24 bit PNG. Kinda screwy, or maybe I'm doing something wrong.

[bokeh]

Must be Photoshop then :) They only way the Save For Web option allows for PNG transparency in Photoshop CS is to save it as a 24 bit PNG. Kinda screwy, or maybe I'm doing something wrong.I've got Photoshop 6 and my version is in Spanish but... to save as 8 bit you need to convert the image to indexed color before saving. I guess that would be something like: image >> mode >> indexed color in the English version.

[toicontien]

Kinda strange, because in CS, you can choose 8-bit or 24 bit from the Save For Web window. I'll have to try converting to 8-bit explicity before saving for the web. Funny how this thread got WAY off topic :p

[bokeh]

Funny how this thread got WAY off topicWhat's it matter, the OP is happy.

[pathfinder74]

Kinda strange, because in CS, you can choose 8-bit or 24 bit from the Save For Web window. I'll have to try converting to 8-bit explicity before saving for the web. Funny how this thread got WAY off topic :p

I've saved as 8-bit and it's more or less the same as a "transparent" gif... which is to say it's crap.