Forum Moderators: not2easy

Message Too Old, No Replies

Stop making pictures transparent

         

matthewamzn

1:33 am on Aug 4, 2006 (gmt 0)

10+ Year Member



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

7:00 pm on Aug 4, 2006 (gmt 0)

10+ Year Member



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

9:04 pm on Aug 5, 2006 (gmt 0)

10+ Year Member



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

9:28 pm on Aug 7, 2006 (gmt 0)

10+ Year Member



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

9:33 pm on Aug 7, 2006 (gmt 0)

10+ Year Member



Except IE hates transparent PNGs without code hacks

*sigh IE*

garann

11:07 pm on Aug 7, 2006 (gmt 0)

10+ Year Member



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

matthewamzn

1:36 am on Aug 8, 2006 (gmt 0)

10+ Year Member



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

8:52 pm on Aug 9, 2006 (gmt 0)

10+ Year Member



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?