header image see-thru

How do i make my header image (bird and logo are sitting on it) transparent so that you can see some of the leaves through it?

.twoColFixRtHdr #header {
      background: #fff;
      background-image:url(img/header_white.gif);
      height:115px;
      
}

http://plymouthwisconsin.com/chamber_fall4.css
http://plymouthwisconsin.com/fall4.html
header-white.gif
nsitedesignsAsked:
Who is Participating?
 
David S.Commented:
The thing about the opacity property is that it affects all child nodes, including text and other elements. To get a partially transparent background without affecting child nodes, one can use a PNG and/or RGBA. I prefer using RGBA with a PNG fallback for older browsers that don't support RGBA.

http://24ways.org/2009/working-with-rgba-colour
http://dorward.me.uk/www/css/alpha-colour/
http://lea.verou.me/rgba.php/

Opacity in CSS has limited support.
Support for opacity is pretty good. You just have to remember that versions of IE before 9 need the proprietary filter property.
0
 
s8webCommented:
I would do it as a transparent png.
header-white.png
0
 
s8webCommented:
You'll have to remove where you had the background color:

Make this:
.twoColFixRtHdr #header {
      background: #fff;
      background-image:url(img/header_white.gif);
      height:115px;
}

This:
.twoColFixRtHdr #header { 
	background-image:url(img/header_white.png);
	height:115px;
} 

Open in new window

0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
s8webCommented:
The image will render as solid grey in IE6 if you care about that sort of thing. I don't.

IE6 doesn't do transparent anything without javascript or a hack.
0
 
s8webCommented:
Here's the source file if you want to adjust the opacity. If you don't have Photoshop, you can use GIMP http://www.gimp.org/
header-white.psd
0
 
nsitedesignsAuthor Commented:
I have ps.  I thought opacity was rendered in css.  I changed opacity to 66% of header image in ps and uploaded it.  Now, it doesn't even display.

http://plymouthwisconsin.com/fall4.html
0
 
s8webCommented:
You need to fix your css. This is what you currently have:

/* Line 103 */
.twoColFixRtHdr #header
{
}

Make it:

.twoColFixRtHdr #header { 
	background-image:url(img/header_white.png);
	height:115px;
} 

Open in new window

0
 
s8webCommented:
Opacity in CSS has limited support.
0
 
nsitedesignsAuthor Commented:
I simply forgot the ; after the background image.  I uploaded css and don't see a change.  

http://plymouthwisconsin.com/fall4.html

I attached my ps file.  can you tell me what I am doing wrong.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.