Question

我设计了一个960网格系统的网站，并通过CSS为页眉和页脚应用背景图像和替代颜色，如下所示，

html {
height: 100%;
background: url(../images/htmlbg1.jpg) repeat-x;
} 

body {
font-family:Geneva,Arial,Helvetica,sans-serif; font-size:12px;
margin:0;
width:100%;
height: 100%;
background:url(../images/headerdrbg.jpg) repeat-x 0 0;
}

footer { 
width:100%; padding:12px 0px; 
background:#404040 url(../images/footertop1.jpg) repeat-x 0 0;
color:#808080; 
}

它在大多数浏览器中运行良好。它看起来也很精致的小屏幕。但是当我水平滚动时，我无法看到背景图像（ie.headerdrbg.jpg和footertop1.jpg）。见附图。 screenshot of footer after moved the scroll bar horizontally in 640x480px

请帮我找到解决方案。提前谢谢。

Answer 1

如果您使用的是960 GS，则不应该出现此问题，因为它们在body上的最小宽度。确保您没有删除它，或者如果布局宽于960px，则更改值：

/*
  Forces backgrounds to span full width,
  even if there is horizontal scrolling.
  Increase this if your layout is wider.

  Note: IE6 works fine without this fix.
*/

body {
    min-width: 960px;
}

水平移动时，背景图像不会显示在较小的屏幕中

1 个答案: