How to make a transparent sticky headline?

Question

I want to try to encode a fixed header that is a bit transparent.

Any ideas, sample code, tutorials? I want to achieve this only with CSS, if possible. It seems to me that you need to play with opacity (CSS3).

Answer 1

Example

Fullscreen jsFiddle: http://fiddle.jshell.net/NathanJohnson/LrNBt/show/

jsFiddle: http://jsfiddle.net/NathanJohnson/LrNBt/

the code

HTML:

<div id="header"> <div id="header-content"> <h1>Here is some heading text :)</h1> <p>Here is some more content of the header...</p> </div> </div> 

CSS

 body { font-family: arial, sans-serif; padding: 0; margin: 0; } #header { background-color: black; /*Opacity start*/ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; filter: alpha(opacity=80); -moz-opacity: 0.80; -khtml-opacity: 0.8; opacity: 0.8; /*Opacity end*/ color: white; position: fixed; top: 0; left: 0; width: 100%; height: 150px; padding: 0; margin: 0; } #header #header-content { margin: 10px; } 

Or you can just use rgba() instead of opacity :

 #header { background-color: rgba(0, 0, 0, 0.8); color: white; position: fixed; top: 0; left: 0; width: 100%; height: 150px; padding: 0; margin: 0; } #header #header-content { margin: 10px; } 

Hope this helps.

Answer 2

Use Firebug to analyze their code:

 #header { left: 0; position: fixed; top: 0; width: 100%; z-index: 90; background: url("../images/bg-header.png") repeat-x scroll 0 0 transparent; height: 247px; } 

Instead of using an image, use:

 background: #000; filter:alpha(opacity=50); -moz-opacity:0.5; -khtml-opacity: 0.5; opacity: 0.5;