semi-transparent background

[meerah]

Hi all,
I am willing to do a semi transparent background in an iframe to enable seeing through the page background... Does anyone have any experience how to incorporate some inline css class to define alpha value of the cell or an iframe ?????
Cheers in advance
http://www.meerahmax.cz

[jscheuer1]

It's tricky in IE and only works in v5.5+. In other browsers that support it, just use a semitransparent .png as the background image in the appropriate place, say it's an iframe, make the background of the page in the iframe the semitran .png. Opera is funny about iframes but will allow it for other elements. IE requires that you set a filter and the rules are odd. Also, you need to set up the css so that the background image is not applied in IE, using only their proprietary filter, example (use after the style declarations for other browsers):

<!--[if gte IE 5.5]>
<style type="text/css">
#semiTrans {
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/semi_trans.png', sizingMethod='scale');
background:;
}
</style>
<![endif]-->

More information on the AlphaImageLoader.

[meerah]

And pls how to apply that style to background of a html site...
I made a background in cells where the iframes are placed so I need just the content loaded to iframes to have transparent background...
Cheers so far

[jscheuer1]

Generally, html sites do not have backgrounds, unless by 'html site' you mean all pages on the site. If so, then the easiest way is to include the style in a sitewide style sheet as an id to be applied specifically (uniquely) needed (as in my example), or as a class wherever needed, or as selected by an element tag type. One difference though is that you cannot use IE conditional comments in a stylesheet. This is the preferred method as it raises no caution flags in any other browser or for validation. Still this alternate method would work in a style sheet:

* html #semiTrans {
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/semi_trans.png', sizingMethod='scale');
background:;
}

Selectors in a style sheet prefaced with * html will only be applied by IE.

One caveat, under most circumstances, if applying this style to something other than the body, the element must have either width or position set in style as well.