• 0

Using PNGs as a table background...


Question

Hello!

Take a look at the attached pic. It's an example of what I want to achieve. I want to use a PNG image that is completely black, but with a 50% transparency applied to it, as the background image for a table. I already have the PNG and I can see this effect work on NS7, however it doesn't on IE.

Can the experts here kindly advise me on how to use a PNG as part of a background image of a table?

Many thanks.

post-31-1050613721.jpg

Link to comment
Share on other sites

16 answers to this question

Recommended Posts

  • 0

Personally, I wouldn't even bother trying to get png's with transparency working in IE...it's too much of a hassle. But if you really, really want to, read this.

Link to comment
Share on other sites

  • 0

well, since IE is stupid and won't give you the transparency, what i would do is open your image editor, put the png on the same color background as the web page, and then sample the color it gives you and make the png that color with no transparency. if you want to use an image behind the transparent png, then lay out the web page how you want WITHOUT the text that would overlay the png, open it in netscape and take a screenie of it and crop it and make that your background image. it's stupid and tedious, but so is IE, so i can't think of another way to do it. hope that helps ;)

Link to comment
Share on other sites

  • 0

Actually... a nice way of accomplishing this would be to use IE's Alpha filter in a Style tag on the table itself.

I'm not sure if those filters work in Netscape yet though. Personally I don't care about like 2% of the world uses Netscape so whatever... IE might be a bit slower and cpu-intensive but it has more features.

Link to comment
Share on other sites

  • 0
Actually... a nice way of accomplishing this would be to use IE's Alpha filter in a Style tag on the table itself.

I'm not sure if those filters work in Netscape yet though. Personally I don't care about like 2% of the world uses Netscape so whatever... IE might be a bit slower and cpu-intensive but it has more features.

You, sir, are part of the reason why the Internet sucks for the people who are trying to make the Internet better. Get over your opinion, and use the standard.

Thank you for your time.

I'll rant later. I'm working now.

more features? You haven't tried Mozilla and all of its plugins lately, have you?

And this is not the place to rant, so if I rant, I'll take it to PM so as not to offend everyone else here. Get back on topic now. I'm sorry I couldn't add anything.

Link to comment
Share on other sites

  • 0
Actually... a nice way of accomplishing this would be to use IE's Alpha filter in a Style tag on the table itself.

I'm not sure if those filters work in Netscape yet though. Personally I don't care about like 2% of the world uses Netscape so whatever... IE might be a bit slower and cpu-intensive but it has more features.

That is what I would like to do, however, if I apply a 50% transparency to the <TD> or <TABEL>, then the entire content is 50% transparent. I do not want the <TD> content to be transparent.

Link to comment
Share on other sites

  • 0
Actually... a nice way of accomplishing this would be to use IE's Alpha filter in a Style tag on the table itself.

I'm not sure if those filters work in Netscape yet though. Personally I don't care about like 2% of the world uses Netscape so whatever... IE might be a bit slower and cpu-intensive but it has more features.

You, sir, are part of the reason why the Internet sucks for the people who are trying to make the Internet better. Get over your opinion, and use the standard.

Thank you for your time.

I'll rant later. I'm working now.

more features? You haven't tried Mozilla and all of its plugins lately, have you?

And this is not the place to rant, so if I rant, I'll take it to PM so as not to offend everyone else here. Get back on topic now. I'm sorry I couldn't add anything.

yikes, excuse me for offending you.

I prefer Internet Explorer. Big deal. I also like AMD and Corsair. Do you want to get on my case about that too? Am I wrong for not using Cyrix and Micron simply because they're the "little guy" and I'm not supporting their efforts?

I was simply stating that most people use IE so it shouldn't be much of a problem for him to use the filter tags. Whether or not you like that, it is the truth.

you said "Use the standard" yet as we've already made it pretty clear than the PNG transparency doesn't work in IE very well so how is that anymore of a standard than using Alpha filters or Netscape's plugins?

Link to comment
Share on other sites

  • 0
well, since IE is stupid and won't give you the transparency, what i would do is open your image editor, put the png on the same color background as the web page, and then sample the color it gives you and make the png that color with no transparency. if you want to use an image behind the transparent png, then lay out the web page how you want WITHOUT the text that would overlay the png, open it in netscape and take a screenie of it and crop it and make that your background image. it's stupid and tedious, but so is IE, so i can't think of another way to do it. hope that helps ;)

I cant really use the method you had described as if some one resizes the browser, the centered table will look off with the background image.

I recall someone once posting a png.css file that helped to compensate for Microsoft's oversight. Does anyone have this?

Link to comment
Share on other sites

  • 0
I cant really use the method you had described as if some one resizes the browser, the centered table will look off with the background image.

I recall someone once posting a png.css file that helped to compensate for Microsoft's oversight. Does anyone have this?

ha.. whoa whoa whoa... background IMAGE?

Can you show us this image?

Generally speaking, background images are a bad idea unless they're really faint and low on saturation and contrast.

Link to comment
Share on other sites

  • 0

Thank you again everyone for help.

I managed to get it working, here is what I used:

&lt;TABLE Style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='Black.png')"&gt;
  &lt;TR&gt;
    &lt;TD&gt;Hello World&lt;/TD&gt;
  &lt;/TR&gt;
&lt;/TABLE&gt;

Link to comment
Share on other sites

  • 0

oh shibby. nothin better than fixin your own problems, right? and thanks for posting the code lol some people figure out the solution to a problem they posted and a lot of other people are having it too but they don't tell the solution...

Link to comment
Share on other sites

  • 0
Actually... a nice way of accomplishing this would be to use IE's Alpha filter in a Style tag on the table itself.

I'm not sure if those filters work in Netscape yet though. Personally I don't care about like 2% of the world uses Netscape so whatever... IE might be a bit slower and cpu-intensive but it has more features.

That is what I would like to do, however, if I apply a 50% transparency to the <TD> or <TABEL>, then the entire content is 50% transparent. I do not want the <TD> content to be transparent.

One possible way around this would be to put two DIV tags inside the TD.

Using absolute positioning, put them both at 0,0 from the top left corner.

Give one of them a black background with 50% transparency (if you're willing to use the IE filter).

Make sure the 2nd layer is below the first one in your html, so that it rests on top in the web browser. Then use this 2nd layer to place your content.

If you want to make sure it still acts like a table... you could place a new table with only 1 cell, inside of that 2nd layer.

I hope you understand what I'm saying.

Link to comment
Share on other sites

  • 0

This isnt working, can you advise?

Also the "Height:100%" in the first <DIV> tag isnt working.

<DIV Style="Position:Absolute; Left:0px; Top:0px; Width:100%; Height:100%; BackGround-Color:#000000; Filter:alpha(opacity=50); z-Index:-1">

<DIV>

<FONT Color=White>Hello World</FONT>

</DIV>

</DIV>

Link to comment
Share on other sites

This topic is now closed to further replies.
  • Recently Browsing   0 members

    • No registered users viewing this page.