Third and final method - CSS3 with IE filters. Problem is, even IE9 doesn’t support color-stops, so what we’re trying to accomplish will NEVER work in IE9 and lower (works in 10 beta).
<div id="headerWrapper"><div id="header">
Whatever you'd have inside the header here.
<!-- #header, #headerWrapper --></div></div>
#headerWrapper {
/* pre-css 3 gets solid bg */
background:#808;
/* 'current' 2012 browsers */
background:-moz-linear-gradient(left,#FF0000 0, #FF0000 50%, #0000FF 50%);
background:-o-linear-gradient(left,#FF0000 0,#FF0000 50%,#0000FF 50%);
background:-ms-linear-gradient(left,#FF0000 0,#FF0000 50%,#0000FF 50%);
/* early webkit declares it different */
background:-webkit-gradient(linear,left top,right top,color-stop(0%,#FF0000),color-stop(50%,#FF0000),color-stop(50%,#0000FF));
/* while newer webkit does not */
background:-webkit-linear-gradient(left,#FF0000 0,#FF0000 50%,#0000FF 50%);
/* THE ACTUAL CSS3 property! */
background:linear-gradient(left,#FF0000 0,#FF0000 50%,#0000FF 50%);
/* IE filters can't do color stops, so don't even BOTHER */
}
#header {
position:relative; /* depth sort over #headerBackground */
width:960px;
height:300px;
margin:0 auto;
/* pre-css 3 gets solid bg*/
background:#808;
/* 'current' 2012 browsers */
background:-moz-linear-gradient(left,#FF0000 0, #0000FF 100%);
background:-o-linear-gradient(left,#FF0000 0,#0000FF 100%);
background:-ms-linear-gradient(left,#FF0000 0,#0000FF 100%);
/* early webkit declares it different */
background:-webkit-gradient(linear, left top, right top, color-stop(0%,#FF0000), color-stop(100%,#0000FF));
/* while newer webkit does not */
background:-webkit-linear-gradient(left,#FF0000 0,#0000FF 100%);
/* THE ACTUAL CSS3 property! */
background:linear-gradient(left,#FF0000 0,#0000FF 100%);
/* filter can do this for legacy IE */
filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#FF0000', endColorstr='#0000FF',GradientType=1 );
}
Yeah, those vendor prefixes make implementing this so clear and easy… Got it live here:
http://www.cutcodedown.com/for_others/donboe/template3.html
Though at least no images were harmed in the coding of this demo. The real laugh is thanks to all those vendor prefixes, even without the comments all those background declarations are two to three times LARGER than the image file.
As usual it will be so buggy and slow in FF the moment you have enough content to scroll, you’d think it was a myspace page