I'm looking to create a header with a unique color transition effect - a left fade from light blue to blue, a center that is solid blue, and a right fade from blue to light blue. The header should span the full width of the page. Can anyone suggest the best way to achieve this using CSS, including background images for the fades on the sides and a centered header section? My current implementation is causing issues with overflow and restriction when resizing the browser window. Any advice would be greatly appreciated. Thank you!
<div id="header">
<div id="leftfade"></div>
<div id="header_container">
<div id="languagechooser"></div>
<div id="logo"></div>
<div id="navbar">
<ul>
<li class="navleft"><a href="aa.a">HOME</a></li>
<li><a href="aa.a">xxxxxxxx</a></li>
<li><a href="aa.a">xxxxxxxxxxxx</a></li>
<li><a href="aa.a">xxxxxxxxxx</a></li>
<li><a href="aa.a">xxxxxxxxxxxx</a></li>
</ul>
</div>
</div>
<div id="rightfade"></div></div>
body{
background: #FFFFFF;
margin: 0px auto;
font-size: 62.5%;
color:#000000;
width:100%;
min-width:965px;}
#header{
position:relative;
height:157px;
background-color:#74d7ea;}
#header #leftfade
{
float:left;
background: url(../img/header_leftfade.png) repeat-y top left;
width:25%;
height:157px;}
#header #rightfade{
position:absolute;
right:0;
background: url(../img/header_rightfade.png) repeat-y top right;
width:25%;
height:157px;}
#header #header_container{
float:left;
position:relative;
text-align:left;
min-width:50%;
height:157px;}
#header #logo{
float:left;
background: url(../img/logo.png) no-repeat;
width:408px;
height:63px;
margin-top:20px;}
#header #languagechooser{
float:right;
width:150px;
height:50px;
background-color:#ffffff;
margin-left:100px;}
#header #navbar{
clear:both;
position:relative;
top:15px;
height:30px;
background-color:#63bdce;
width:98%;
overflow:hidden;}
#header #navbar ul{ list-style:none;}
#header #navbar ul li{ float:left;}
#header #navbar ul li a{
background: url(navi_bg_divider.png) no-repeat right;
padding-right: 12px;
font: bold 1.7em Myriad Pro, Arial, Helvetica, sans-serif;
padding-left: 12px;
display: inline-block;
line-height: 30px;
text-decoration: none;
color:#ffffff;}