Transparency problem

HTML & CSS
1

I am not sure whether I have the right css for the transparency to work in all browsers, so I have decided to post my html and css here, for someone to have a look at it. I am wanting to have #header as a transparency background (in Photoshop the opacity is 50%), and #businessWoman and #headerInfo as non-transparent images. It seems as though everything is transparent, and the #header background image is more transparent than it should be. So can someone please have a look at my html and css, and tell me how I can fix this? By the way I am using doctype XHTML 1.0 Strict. Thanks in advance.

<div id="header">
			<div id="businessWoman"><img alt="business woman jumping for joy" height="406" src="images/business-woman.png" width="366" /></div>
		
			<div id="headerInfo">
				<h1>Title here</h1>
				<p>A paragraph here.</p>
				<p>Another paragraph here.</p>
				<p><a href="http://www.domainname.com/portfolio.php"><img alt="See Portfolio" height="45" src="images/portfoliobtn.gif" width="138" /></a> <a href="http://www.domainname.com/contact.php"><img alt="" height="45" src="images/contactbtn.gif" width="138" /></a></p>
			</div>
	</div>


#header {
	background: url('images/headerbg.png') no-repeat;
	width: 100%;
	height: 389px;
	color: #002535;	
	filter:alpha(opacity=70);
   	opacity: 0.4;
	-moz-opacity:0.4;
	-khtml-opacity: 0.4;
}

#businessWoman {
	float: left;
	width: 366px;
	padding-right: 4em;
	filter:alpha(opacity=100);
	opacity: 9.9;
	-moz-opacity:9.9;
	-khtml-opacity: 9.9;
}

#headerInfo {
	padding-top: 6em;
	padding-right: 3em;
	filter:alpha(opacity=100);
   	opacity: 9.9;
	-moz-opacity:9.9;
	-khtml-opacity: 9.9;
}
2

If you are using a Photoshop transparent png then there should be no reason to use opacity in your CSS. This is why it is more transparent. If you want to do all the opacity with CSS only and no image then follow this http://www.visibilityinherit.com/code/css-opacity.php

3

When I test it in Internet Explorer version 5-6 it displays just grey for the background image, that is why I posted this thread.

4

Then you should have mentioned that in your original post. Just saying… I mean… that’s what I would do.

5

Hi,

I am not sure if this is what you mean but when you make an element transparent then the element and all its children are first rendered and then transparency is applied to all those elements as a whole.

Applying 100% transparency to a child of a transparent div will do nothing because it can’t be less transparent than its parent.

If you want to use an image instead then you would need to use the alpha image loader filter for IE6 as it doesn’t understand degrees of transparency in png images (or use pngfix). However the alpha image loader is not a substitute for the background property and carries a big penalty in performance for ie6.

Therefore its best to avoid png transparency in IE6 and just supply it a basic alternative.

For modern browsers you could use rgba with transparency but its not supported in ie7 and under.

Depending on your layout you can use the trick shown in an old css quiz.

http://www.pmob.co.uk/temp/quiz20-answer.htm
http://www.pmob.co.uk/temp/quiz20-opacity2.htm