Opaque image on a transparent background

[superdan_35]

I have recently changed the design of a site to incorporate a transparent background in div containers using the new CSS3 styles. The only problem is that any images I have within these div containers also become transparent.

The page in question is a div container with a table inside. The image (a jpeg with solid white background) is placed inside the table with a div of it's own for styling. I have tried setting opacity for the image div as well as background colours and images, none of which work. I have also tried to give the table cell a background colour.

Any ideas would be brilliant!

Thanks,
Dan

[swa66]

opacity [webmasterworld.com] sets opacity on the element AND all it's children.

What you might be interested in are the rgba and hsla colors [webmasterworld.com] and use png images as needed.

[superdan_35]

Thanks for the quick reply.

I have added the property, background-color: rgba(255,255,255,1) to the div that holds the image and it has had no impact. Would this be the right place to include this?

An example page is <snip>

Also, the homepage has an image slider which has the same problem in Firefox, but in IE the image is solid, <snip>
Thanks

[edited by: swa66 at 7:51 pm (utc) on Nov. 3, 2009]
[edit reason] No personal links, please see linking policy in ToS and Forum Charter [/edit]

[swa66]

Try " background-color: rgba(255,255,255,0.5); " instead. "1" means fully opaque (noting under it is visible, it covers all) "0" is fully transparent, all under it is shown.

Do know IE does not do this (any version). so be ready with a conditional comment to set a gracefully degraded solution there.

[superdan_35]

Tried that as well and still no joy. I have decided to use a transparent PNG for the container background instead and this has solved the problem. Not what I wanted to do, but it works so I can;t complain!

Thanks for all the advice,
Dan