调整浏览器大小时CSS后台收缩/扩展问题

Question

当我调整浏览器（窗口）的大小时，它会缩小顶部背景图像（黄色方块）并导致布局中的1px中断（红色方块显示出有问题的区域）。我试图通过将宽度设置为50px来强制顶部背景图像的大小始终相同。其余的背景是我使用紫色方块显示的重复-x content_bg_sliver.gif图像。有什么建议吗？

谢谢， 游击

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 */

Answer 1

试着看看这个，看看这是不是你的追求，如果你认为这是一个更好的方式去做！

http://drupalgeeks.co.uk/example/