ブラウザのサイズ変更時にCSSの背景が縮小/拡大される問題

ブラウザのサイズを変更すると、上部の背景イメージ（黄色の四角形）が縮小され、レイアウトに1pxのブレークが発生します（赤色の四角は問題のある領域を示します）。私は50pxに幅を設定することによって、常に上部の背景画像のサイズが同じになるようにしました。背景の残りの部分は、紫色の四角形を使って表示されるrepeated-x content_bg_sliver.gif画像です。助言がありますか？ブラウザのサイズ変更時にCSSの背景が縮小/拡大される問題

おかげで、パルチザン

P.S：赤い四角内の問題を示して添付画像を参照してください。

<!-- HTML CODE Starts --> 
<div id="top-navigation-container-inner"> 
    <div id="top-nav-left-background"><!-- The left background appended to the top  main navigation --></div> 
    <div id="top-nav-right-background"><!-- The right background appended to the top main navigation --></div> 
</div> 

<div id="main-body-container"> 
    <div id="main-body-container-inner"> 
     main content goes here.... 
    </div> 
</div> 

<!-- HTML CODE Ends --> 



/* CSS Code Starts */ 
#top-navigation-container-inner { 
background: #FFF; 
height: 160px; 
float: none; 
font: 14px Arial; 
position: relative; 
} 

#top-nav-left-background, #top-nav-right-background { 
    height: 370px; 
    position: relative; 
    top: 0; 
    width: 50px; 
} 

#top-nav-left-background { 
    background: url('../images/top_nav_left_background.gif') left bottom no-repeat; 
    float: left; 
    margin-left: -50px; 
} 

#top-nav-right-background { 
    background: url('../images/top_nav_right_background.gif') right bottom no-repeat; 
    float: right; 
    margin-right: -50px; 
} 

#main-body-container{ 
background: aqua url('../images/content_bg_sliver.gif') center repeat-y; 
float:none; 
overflow:hidden; 
width: 100%; 
height: 400px; 
} 

/* End CSS Code */

enter image description here