Stop making pictures transparent

[matthewamzn]

I want to make the background of my table trasparent. The problem is it's also making pictures inside of that table trasparent. How can I change the table's opacity without affecting the pictures inside it.

This is some of the code:

td.leftside, td.rightside {
border: 1px solid #AAAAAA;
background: #F5F5F5;
padding: 10px;
padding-top: 0px;
vertical-align: top;
filter:alpha(opacity=80); -moz-opacity:0.0; opacity:0.80; -khtml-opacity:0.80;
}

[garann]

I think that you'd need a background image with transparency. In my experience, setting opacity on an object changes the opacity of every element it contains...

[matthewamzn]

Something like this?

td.leftside, td.rightside {
border: 1px solid #AAAAAA;
backgroundimage: url(transparent_background.gif);
padding: 10px;
padding-top: 0px;
vertical-align: top;
}

[garann]

Well, sort of.. The syntax is right, but you'd probably want a PNG instead of a GIF, since GIFs only have binary transparency. A PNG would allow you to generate a background with say 60% opacity, so your page would show through uniformly underneath.

[AdamLC]

Except IE hates transparent PNGs without code hacks

*sigh IE*

[garann]

Yes, but it's a very small hack. :) And it's supposed to be fixed sometime this winter! (crosses fingers)

[matthewamzn]

I've tried using a transparent background with 50% opacity that I made with photoshop. But it just comes up as completely transparent, when I set it as a background for the table cells. Is there a place where I could download an example transparent image? Maybe then one I made is wrong.

[garann]

What does your CSS look like? Is it possible that it can't find your image, or it's not getting called quite right? I just noticed a typo in what you posted above, so that wouldn't work. You need a hyphen in

background-image

. Does that help at all?