调整浏览器大小时的 CSS 背景收缩/扩展问题答案

【问题标题】：CSS background shrink/expand issue when browser is resized调整浏览器大小时的 CSS 背景收缩/扩展问题
【发布时间】：2012-04-01 06:27:23
【问题描述】：

当我调整浏览器（窗口）的大小时，它会缩小顶部背景图像（黄色方块）并导致布局中断 1 像素（红色方块显示有问题的区域）。我试图通过将宽度设置为 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 */

【问题讨论】：

嗨 - 你有要查看的网址吗？
不，对不起，我没有。它正在开发中。您能否推荐一个网站，我可以将代码导出到该网站并使其在线可用？
试试 jsFiddle.net 或 jsBin.com。
对不起，我不能在那里发布代码。
你怎么把左右两边当成2个背景？废弃这些并执行以下操作：假设您的网站是 800px 宽，您将创建您的重复 y 图形 800x1px，并在正确的位置使用左右阴影，然后在您的主布局中重复它 - 这将为您提供阴影边缘想要 - 减少代码，比你现在做的方式要好得多

标签： html css background-image

【解决方案1】：

试着看看这个，看看这是否是你所追求的，如果你认为这是一个更好的方法！

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

【讨论】：