Can this be done? Transparent graphics overlapping?

[PowerBit]

Hi there,

I have been thinking about creating transparent header images that overlap a greater back ground image. The idea is to create a header that is mildly transparent and provides structure independent of different backgrounds that load in various sections of the site behind it. I want the header graphic to be transparent to a certain percentage that reveals the back ground image behind it with out cutting different header images per section.

I am looking for advise at this point that would enable me to pursue this direction. IE 6 is the how far I will degrade.

Thanks much for your support!

[g1siberia]

Maybe i dont understand but I dont see how this would be hard. Your header images can be made into gifs or pngs with transparent backgrounds no problem. These would then sit on top of the background image.
Your `structure independant` comment is hard to follow - please explain further if needed!

[jemple]

Just make the images semi transparent and place them relatively on the page?

[molona]

If you are targeting IE6, then use gifs or 8-bit pngs. IE and PNG are not a good combination, IE does not display the transparency unless it is a 8-bit png, that is, the equivalent to a normal gif.

Another approach would be to use javascript to trick IE to display PNGs properly, but of course, this will not work if javascript is turned off.

[PowerBit]

Further Clarity...

What I am trying to achieve is a layered effect with a background image having other transparent images over the top allowing the background image to show through the top image. I'll post an image file:

http://www.powerbitwebdesign.com/cli...mple-light.jpg

Note the header and footer are transparent images showing though to the background image.

Thank you for your patience and input here...

Billy

[molona]

Can't see anything, I had a firewall alert... If the transparency is applied to the full image, you can choose either to apply it to the gif or png (and then all that's been said is valid) or you can place each image in a different div and apply it to the div using CSS (the name of the property to use will be opacity for all browsers except ie that will use alpha instead)

[Faseeh]

You can use two transparent images and control them with CSS and DIV. That way you can get a better result.

[PowerBit]

So if I have a graphic in PS that is like %30 opacity, I just save that as a transparent gif or png 8 and layer that with my css?

What are the tricks to this?

[molona]

If the picture has the right opacity applied, you simply put it inside a div and that's it. Whatever is underneath will show through.

If you don't want to do that but you'd rather control the opacity though CSS, you will need to use the properties I gave you.

As an example:

<div class="semitransparent"><img src="name_of_pic.ext" alt="image with no opacity"</div>

.semitransparent{opacity: 0.3; filter:alpha(opacity=30)}

The filter alpha is for IE, because they use their own system instead of the standarized one.

For stacking, you can postioned both elements and give them a z-index, which is the stack order

[PowerBit]

If the picture has the right opacity applied, you simply put it inside a div and that's it. Whatever is underneath will show through.

If you don't want to do that but you'd rather control the opacity though CSS, you will need to use the properties I gave you.

As an example:

<div class="semitransparent"><img src="name_of_pic.ext" alt="image with no opacity"</div>

.semitransparent{opacity: 0.3; filter:alpha(opacity=30)}

The filter alpha is for IE, because they use their own system instead of the standarized one.

For stacking, you can postioned both elements and give them a z-index, which is the stack order

This is all very interesting... Thank Molona for you remarks and willful sharing of intelligence...

My question: are these techniques compatible with IE6? If not are there good hacks?

I feel like I am getting somewhere... Thanks Molona!

[PowerBit]

If you are targeting IE6, then use gifs or 8-bit pngs. IE and PNG are not a good combination, IE does not display the transparency unless it is a 8-bit png, that is, the equivalent to a normal gif.

Another approach would be to use javascript to trick IE to display PNGs properly, but of course, this will not work if javascript is turned off.

Stated here, Molona writes that IE does not support transparency unless the file is a png-8. She goes on to say that a png-8 is equivalent to a gif. Does this translate that IE will also recognize the transparency of a gif too?

[PowerBit]

Hi there again....

I have managed to create a small test template to try some of the techniques mentioned here in this thread.

Seen Here:
http://www.powerbitwebdesign.com/cli...wman/test.html

However the png header is not transparent. I have saved it as a png-8 file with Matt = Black and with transparency settings but it is not allowing the background image to show through as seen in this example:

http://www.powerbitwebdesign.com/cli...mple-light.jpg

Any thoughts as to what has gone wrong?

I am using Photoshop 7
This has only been tested in MOZ

Also here is my code:

CSS

/* stylesheet-1 Document */

body {
 background: #fff; 
 font:76% arial, verdana, helvetica, sans-serif;
}

* { margin:0; padding:0;
}

#wrapper {width:1006px; margin:0 auto;
}

#logo {background: #000 url(logo.jpg) top left no-repeat; width:250px; height:120px; float: left;

}
#banner {background: transparent url(header.png) top left no-repeat; width:756px; height:120px; float:left;

}

/* ------- Section Pages ------- */

#environment {background: #000 url(bg.jpg) no-repeat; width:1006px; height:750px;
}

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>New Man Test</title>
<meta name="keywords" content="" />
<meta name="description" content=""  />
<meta name="title" content="" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="includes/stylesheet-1.css" />
</head>
<body>
<div id="wrapper">
   <div id="environment">
      
	  
    <div id="logo"></div>
    <div id="banner"></div>

   </div>
</div>

</body>
</html>

[PowerBit]

If you are targeting IE6, then use gifs or 8-bit pngs. IE and PNG are not a good combination, IE does not display the transparency unless it is a 8-bit png, that is, the equivalent to a normal gif.

Another approach would be to use javascript to trick IE to display PNGs properly, but of course, this will not work if javascript is turned off.

Oh, I gotcha Molona... You are saying IE doesn't recognize png-24 which are transparent and it only recognizes png-8 which are not fully transparent alike gifs.

OK