tranparent div bg, but NO transparency on image

[GeTSm0keD]

how can I get the background of a div to be transparent,

but make the image inside the div to be fully visible?

using css..

[MTsoul]

div { background: 0; }

That's the default behaviour.

[GeTSm0keD]

div { background: 0; }

That's the default behaviour.

I'm applying a transparency to the div it's self,
so the background can be seen just a little bit.

I just don't want the images or the content of the div,
to be transparent as well, I've seen it done before,
I just can't find the site any more :(

[MTsoul]

So you want the background of the div to be transparent just a little bit, but the content still 100% opaque?

If that's the case, use a half transparent png as the div's background. Might not work as well in IE though.

[GeTSm0keD]

I had thought about using a PNG, and really I don't think I design for IE6 any more when it comes to css, just cause I can get everything to look good in FF and IE7.

but there is no way to achieve this with just css?

[noTime]

Oh, there is one way. And definetly, you don't know it. :P I'm quite confused about your description. Could you make a scheme in PS or something?

[GeTSm0keD]

my bad, I thought I had a link posted..

http://www.melodylee4u.com/ml/index.cfm?Action=Home
as you browse, I have different white BG's for each div,
thats why I was tryin' to avoid converting to a png, so many of them..

if you go to:
http://www.melodylee4u.com/ml/index.cfm?Action=Image&GalleryID=16&PhotoID=250

I'm tryin' to display an image from the album,
but at full visibility.. NOT transparent

[thats all folks]

This might not be the right answer but it could lead you into the direction you are going.

style="filter:alpha(opacity=75);-moz-opacity:.75;opacity:.75;"

I know that this will also mess up what ever content is in it, meaning the content will also inherit the alpha/opacity. maybe someone knows of a java script hack that will fix this.

Just a thought

Cheers

[MTsoul]

The easiest way I could think of is the png. How is that a hassel at all? You aren't manually inserting them into every div, you are using the CSS background rule. You could also hack it so that it doesn't affect IE6.

Another way to do it that'll work in all browsers but will take some effort, is to put a div inside the beginning of those divs. Use CSS and make them 100% tall and wide, use a transparency and absolute position to layer it below the content. That way your content is still 100% opaque and you have a semi-transparent background.