Question

Когда я изменяю размер браузера (окна), он сжимает верхние фоновые изображения (желтые квадраты) и вызывает разрыв в 1px в макете (красные квадраты показывают область с проблемой)Я попытался заставить размер всегда быть одинаковым для верхних фоновых изображений, установив ширину 50 пикселей.Остальная часть фона - это изображение repeat-x content_bg_sliver.gif, которое я показываю с помощью фиолетового квадрата.Любые предложения?

Спасибо, partizan

PS: Пожалуйста, смотрите прикрепленные изображения, которые показывают проблему в красных квадратах.

<!-- 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