Results 1 to 10 of 10

Thread: CSS Table TD Background Transparencies

  1. #1
    Join Date
    Jul 2007
    Location
    north shore
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default CSS Table TD Background Transparencies

    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.

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,165
    Thanks
    44
    Thanked 3,239 Times in 3,200 Posts
    Blog Entries
    12

    Default

    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:

    1. 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:

    2. 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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Nov 2006
    Posts
    236
    Thanks
    4
    Thanked 1 Time in 1 Post

    Default

    Quote Originally Posted by jscheuer1 View Post
    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:

    1. 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:

    2. 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?

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,165
    Thanks
    44
    Thanked 3,239 Times in 3,200 Posts
    Blog Entries
    12

    Default

    Quote Originally Posted by riptide View Post
    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  5. #5
    Join Date
    Jul 2007
    Location
    north shore
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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.

  6. #6
    Join Date
    Nov 2006
    Posts
    236
    Thanks
    4
    Thanked 1 Time in 1 Post

    Default

    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.

  7. #7
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,165
    Thanks
    44
    Thanked 3,239 Times in 3,200 Posts
    Blog Entries
    12

    Default

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

    http://www.dynamicdrive.com/forums/s...ad.php?t=22608
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  8. #8
    Join Date
    Nov 2006
    Posts
    236
    Thanks
    4
    Thanked 1 Time in 1 Post

    Default

    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.

  9. #9
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,165
    Thanks
    44
    Thanked 3,239 Times in 3,200 Posts
    Blog Entries
    12

    Default

    Quote Originally Posted by riptide View Post
    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/s...ad.php?t=22534
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  10. #10
    Join Date
    Nov 2006
    Posts
    236
    Thanks
    4
    Thanked 1 Time in 1 Post

    Default

    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.)

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •