div background image and opacity

[u01jmg3]

Hi, second post of the day  but I'm stuck. Basically I have a div with a border, some text and a background image. Now, I was trying to be slightly creative and thought I'd make the background image 50% opaque so that if text spills onto it, the text could still be read easily. I know I'd probably be just as quick saving the image with 50% opacity in Photoshop but I was hoping I could get this to work with CSS.

 

I found this site: http://www.mandarindesign.com/opacity.html which told me to add this code to my CSS:

 

opacity: .50;
filter: alpha(opacity=50);
-moz-opacity: 0.5;

 

Now when I do this it works but works too well and makes the whole div 50% opaque (border, text and background image) which is kind of obvious from what I was doing so what I want to know is how can I make only the background image opaque without affecting the rest of the div including borders and text. I have tried putting the text in a child div and setting the opacity of it to 100% but this is ignored and I was hoping I could have the parent div as the div with the background image so I don't want to mess around with positioning and having separate divs for text and background image. Thanks!!

[ToonMariner]

you cannot avoid the whole div being made opaque as that is what css will do; if you set the div to 50% opacity its contents will have 50% - I have yet to find a css solution.

 

you should use a partially transparent png24 and either use the alpha image loader or (and my preference) iepngfix to get ie6 to playball (suggest you use some conditional comments to include an ie6 only style sheet).

[AdRock]

Could you not have another div over the top wihich has the text and set the z-ndex higher and don't specify a background color?

[ToonMariner]

if you positioned it - if it were a child of the opaque div then it would inherit the opacity...