[BrightTribe]

This is my first post on Programming Talk. I hope someone is able to help.

I've completed a new website (www.mxilife.com) and have found a bit of a frustrating issue. The <td> background area of my body uses the following to make the background color transparent so you can see the background image through the body:

td.sm-body
{
padding: 20px;
color:#FFFFFF;
font-size:11px;
font-family:Verdana, Arial, Helvetica, sans-serif;
line-height: 160%;
background-color: #000000;
/* for IE */
filter:alpha(opacity=85);
/* CSS3 standard */
opacity:0.85;
}

This works great if there is only text in the body. However, I need to make a page with an image in the body. See page here.

I've tried making a new style that has "opacity=100" and have applied it to both the <img> and the <p> tags. And I've tried wrapping the image in a separate <div> tag.

Is there a way to make the image not transparent? And this really needs to be "simple" because this entire site is editable in our CMS so I cannot use floating divs, etc. These are dynamic pages and the body content/code is editable from an editor in the control panel.

Thanks for your help!

[BrightTribe]

I had already created a sytle (e.g. ".img") and wrapped my image in a <div> tag.

.img
{
/* for IE */
filter:alpha(opacity=100);
/* CSS3 standard */
opacity:1.00;
}

But I added:

.img
{
/* for IE */
filter:alpha(opacity=100);
/* CSS3 standard */
opacity:1.00;
position:relative;}

And that seems to work in IE, but it does nothing in Firefox. Thoughts?

[GurkanAlkan]

I am not sure but can you try -moz-opacity

For example
-moz-opacity:1