CSS Table TD Background Transparencies

[digitaldiva]

I am working on a site where the client really wants the background of the tables to be transparent.

For Example in my style sheet I define TDs like this one:

TD#Frame01RowMidColm1 {
width: inherit;
height: inherit;
background:url(images/bkg-right-01.gif) repeat;
filter:alpha(opacity=60);
-moz-opacity:.60;
opacity:.60;
}

And I apply that as an id to every td - or table in some cases. I placed some images in my tables (tds) and they are all transparent as well. I only want the background image that's repeated to be transparent... I want the content to remain the opaque.

Can this be accomplished? All advice welcome.
Thanks.

[jscheuer1]

Even though it is what you are saying, you don't seem to mean transparent. I think you mean semi-transparent. By applying partial opacity to the cell, everything in it will have the same opacity. There are two basic choices that I am aware of:


To hold your content, superimpose a table with no opacity style or filter and no background, over one of the same size with the desired background and opacity setting.


or:


Use just one table with no style opacity or filter opacity setting. Make your background image be a semi-transparent .png. This seems easier except you will need to use a special alpha image loader filter to get it to work in IE 6 and earlier and that gets complicated.

[riptide]

Even though it is what you are saying, you don't seem to mean transparent. I think you mean semi-transparent. By applying partial opacity to the cell, everything in it will have the same opacity. There are two basic choices that I am aware of:


To hold your content, superimpose a table with no opacity style or filter and no background, over one of the same size with the desired background and opacity setting.


or:


Use just one table with no style opacity or filter opacity setting. Make your background image be a semi-transparent .png. This seems easier except you will need to use a special alpha image loader filter to get it to work in IE 6 and earlier and that gets complicated.


because of the problem of IE 6 I use a javascript cross browser opacity script. woudn't that work better?

[jscheuer1]

because of the problem of IE 6 I use a javascript cross browser opacity script. woudn't that work better?

That depends upon what kind of script you mean. I have seen, but not personally used or tested scripts that can facilitate the use of the IE 6 and earlier alpha image loader filter to display semi-transparent .png images as backgrounds while allowing all other browsers that support the normal display of such images as backgrounds to do their regular thing. This would really be a personal choice though, and could be a part of the second solution I already mentioned. If used successfully in that way, it might make that option a bit easier to use, but there would be a learning curve either way - either learn the script for the filter or learn the filter. Additionally, one would still need to know or to learn how to make the desired .png image(s).

If on the other hand, you are talking about a script that handles style opacity, that would be of no help here.

[digitaldiva]

What a helpful forum I am glad I joined. You're right, I meant semi-transparent. I'll probably try both methods. I have not worked with transparent png images before and may have better luck with a super imposed table. But the png transparency would be cool to learn as well. Thanks for your advice.

[riptide]

ah yeah that PNG thing is a pain. you still could fix it wuth CSS if you didn't use the the PNG-24 image image. I wonder in using cliping you could combine it with an opacity script wash out the gray. hum...nevermind.

anyway all the scripts on the IE6 fix use PHP.

[jscheuer1]

Have a look at this thread, post #2 in particular:

http://www.dynamicdrive.com/forums/showthread.php?t=22608

[riptide]

oh wow I guess you really could do something like that. Well it's all good unless you wanted an image to fade into the background image.

[jscheuer1]

oh wow I guess you really could do something like that. Well it's all good unless you wanted an image to fade into the background image.

Well, once you have a background, whether it is a pseudo background semi-transparent .png loaded with the alpha image loader, or a regular css style background, or other type (even an invalid background), as long as it is recognised by the browser as a background, you can then fade any image that is over it into or out of it. Fading an image is a separate thing. Here is a recent script for fading images:

http://www.dynamicdrive.com/forums/showthread.php?t=22534

[riptide]

oh not that. like lets say you have an image and you want the center of it to be solid but farther from the center it fades into the background image. I think you can only do that with a 24-PNG image (or PSD if you could put that on the web.)