🔒 Locked

[web] Question

Started by Nanven Nov 20, 2004 at 4:34 PM 8 replies 1.2k views

Original Post

Nov 20, 2004 at 4:34 PM

Okay, let's say you have a background image to a table. Is it possible to make one of the table cells transparent in any way so you can still see the background through it? Any source code/tutorials would be appreciated, thanks. EDIT: Let me clarify, I know if I leave the table cell alone(don't give it a bgcolor or background image) it will share the same background. That's not what I want, I want a different, darker, transparent image for the table cell, but still be able to see the image behind it. Like this: http://www.malador.com/malmember/maelgrim/testing/draft_someguy.jpg See how the news table cell body is transparent? That's what I am after. NOTE: That was done in Photoshop so I haven't figured it out, LOL.

ontheheap

Nov 20, 2004 at 4:39 PM

I'm pretty sure that can be done using CSS. background-color has a transparency option.

Pipo DeClown

156

Pipo DeClown

Nov 20, 2004 at 5:01 PM

I'd use a PNG with alpha of 1x1 and then let it autorepeat to fill the thing. I'm not sure if CSS can do it.

There's always the opacity option, google it. Although on browsers like Mozilla and Firefox, ITS SOOO SLOW.

intersesting google search | example

Nanven

Author

Nanven

Nov 20, 2004 at 5:39 PM

I tried the CSS, when I used the transparent option it didn't let me select a color to make it transparent with.

I am trying to get the PNG idea working, but for some reason the transparency isn't working, it is completely solid on webpages, but transparent in photoshop.

C-Junkie

139

C-Junkie

Nov 20, 2004 at 5:42 PM

Quote:
Original post by Nanven
I tried the CSS, when I used the transparent option it didn't let me select a color to make it transparent with.

I am trying to get the PNG idea working, but for some reason the transparency isn't working, it is completely solid on webpages, but transparent in photoshop.

What do you mean select a color to make it transparent with?

The PNG idea doesn't work because IE is broken with PNGs, last I checked.

Nanven

Author

Nanven

Nov 20, 2004 at 5:48 PM

Like when I do: td {background-color: transparent} it totally ignores the background color, and just meshes with whatever is behind it.

jumpjumpjump

Nov 20, 2004 at 6:03 PM

Png transperency works in all browsers with this:
http://homepage.ntlworld.com/bobosola/pnghowto.htm

me.rating++?

Nanven

Author

Nanven

Nov 20, 2004 at 6:44 PM

Actually it does work with CSS, had to do this:

However, that affects the text too and makes it hard to see. Any ideas on how to keep text at 100% opacity?

Katta

Nov 20, 2004 at 10:46 PM

Question: Is your background image going to scroll, or is it going to sit fixed while the content scrolls over it? If it's going to scroll with the content of the page, the easiest method short of some IE hacking to make .png's work is to duplicate the background image, crop it to the required size, tint it, and apply it as the background image of your cell.

Sander

145

Sander

Nov 21, 2004 at 12:13 PM

Here is an example of what Katta is talking about. It does not use any transparency at all. Just plain CSS and fully opaque images and text. Also, no tricks (except some hacks to make it work with IE ofcourse).

Topic Locked

This topic has been locked by a moderator. New replies are not allowed.