Html 左侧和右侧水平渐变背景的css标题

我正在尝试一个头球，它有一个从浅蓝色到蓝色的渐变，中间是蓝色，右边是蓝色到浅蓝色的渐变。标题的宽度必须为100%。有人能告诉我这是否是css驱动的标题部分的最佳方法，它由左淡入（淡入淡出的背景图像）、右淡入淡出和中间标题部分组成。。我遇到的问题是，如果有人决定调整浏览器窗口的大小，在设置像素时，当前方式会溢出/限制我。任何帮助都将不胜感激。。干杯

 <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;}

身体{
背景：#FFFFFF；
保证金：0px自动；
字体大小：62.5%；
颜色：#000000；
宽度：100%；
最小宽度：965px；}
#标题{
位置：相对位置；
高度：157px；
背景色：#74d7ea；}
#标题#左褪色
{
浮动：左；
背景：url（../img/header_leftfade.png）在左上角重复-y；
宽度：25%；
高度：157px；}
#标题#右淡入{
位置：绝对位置；
右：0；
背景：url（../img/header_rightfead.png）在右上角重复-y；
宽度：25%；
高度：157px；}
#收割台#收割台_容器{
浮动：左；
位置：相对位置；
文本对齐：左对齐；
最小宽度：50%；
高度：157px；}
#标题#标志{
浮动：左；
背景：url（../img/logo.png）不重复；
宽度：408px；
高度：63px；
页边距顶部：20px；}
#标题#语言选择器{
浮动：对；
宽度：150px；
高度：50px；
背景色：#ffffff；
左边距：100px；}
#标题#导航栏{
明确：两者皆有；
位置：相对位置；
顶部：15px；
高度：30px；
背景色：#63bdce；
宽度：98%；
溢出：隐藏；}
#标题#导航栏ul{列表样式：无；}
#标题#导航栏ul li{浮动：左；}
#标题#导航栏ul li a{
背景：url（navi_bg_divider.png）无重复右键；
右侧填充：12px；
字体：粗体1.7em Myriad Pro，Arial，Helvetica，无衬线；
左侧填充：12px；
显示：内联块；
线高：30px；
文字装饰：无；
颜色：#ffffff；}

要获得不同尺寸的动态输出：

像这样的事情可能会被证明是有用的

---

但是，这取决于您需要的浏览器支持。

如果要调整渐变大小，请尝试使用渐变，而不是使用图像。或者您可以使用

背景位置：居中来居中蓝色部分

并让白色的左右两侧占据任意大小调整后的左侧空间