How to make a transparent-sticky header? - css

Question

I want to try to code a fixed-header that is a bit transparent.
Any ideas, sample code, tutorials? I want to achieve it with CSS only, if possible. Playing with the opacity (CSS3) is needed, I guess.

Answer 1

Example
Full screen jsFiddle: http://fiddle.jshell.net/NathanJohnson/LrNBt/show/
jsFiddle: http://jsfiddle.net/NathanJohnson/LrNBt/
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 could 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;
}
I 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;

Answer 3

You can also make a glassy (translucent) background using the new backdrop-filter property:
header {
top: 0;
position: sticky;
background: transparent;
backdrop-filter: blur(5px);
}
header {
top: 0;
position: sticky;
background: transparent;
backdrop-filter: blur(5px);
padding: 24px;
font-size: 24px;
font-weight: bold;
}
p {
width: 200px;
}
<header>This is a sticky header</header>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris magna elit, consectetur in ultricies nec, imperdiet sit amet turpis. Sed ligula eros, pellentesque ac ligula eu, mollis iaculis est. Donec tempus massa in libero consectetur, laoreet feugiat tortor rhoncus. Aliquam ac risus et risus finibus sodales. Suspendisse et ipsum mollis, convallis elit ac, interdum nibh. Etiam finibus odio urna, eu pretium arcu varius ut. Aliquam erat volutpat.
Duis volutpat mollis turpis, at posuere ipsum semper in. In in ligula tortor. Integer eget lorem nec ex ultricies molestie. Proin convallis sagittis orci nec tempus. Pellentesque luctus condimentum libero in fermentum. Mauris ornare sem nec tellus bibendum, eu interdum nisl mollis. Morbi et lectus sodales, blandit urna et, posuere metus. Praesent sodales eu tortor eu vestibulum. Mauris eu quam sit amet neque faucibus facilisis. Sed tincidunt enim egestas elit finibus, id tempor erat luctus. Ut sed faucibus ante. Suspendisse non lacus augue. Duis porta lorem sed enim lobortis, a malesuada leo scelerisque. Nam neque massa, tempus sit amet velit nec, tincidunt bibendum dui. Praesent neque tortor, blandit in nunc vehicula, suscipit fringilla turpis.
</p>