背景图像未延伸到页面底部答案

【问题标题】：Background image not extending to bottom of page背景图像未延伸到页面底部
【发布时间】：2013-07-03 04:42:33
【问题描述】：

我正在处理我网站上包含大量数据的页面，因此该页面非常长。该页面由主体的背景图像和带有背景图像的容器组成，两者都在页面的整个长度上运行（不是顶部或底部边距，也没有顶部或底部填充）。我遇到了背景图像的问题：它们在某些分辨率下没有延伸到页面底部。我编码的屏幕是 1680 像素宽，目前两个背景图像都一直延伸到底部。但是，当我在具有较小分辨率的屏幕上（例如 1280 像素宽）查看页面时，背景图像不会一直延伸到底部。

我正在使用 XHTML 1.0 Strict。

以下是相关的 HTML 代码：

<body class="ice01">
<div id="maincontent2">
<!-- content -->
</div>
</body>

这里是相关的CSS代码：

.ice01 {
background-image: url('../images/iceBackground04.jpg') ;
    margin: 0 100px; 
font-family: book antiqua; 
font-size: 19px; 
color: #12124c;}


#maincontent {
width: 88%;
background-image: url(../Images/BlueParchment.jpg);
margin: 0px auto;
padding: 0px 32px 0px 32px;}

如果我调整窗口大小，也会出现此问题。此外，如果我取出背景图像并用颜色替换它们，这个问题就会消失。我曾尝试使用反向速记 (background: #0000ff url('../images/iceBackground04.jpg') repeat 0 0;)，但这并不能解决问题。

我已经尝试在他们两个上使用min-height: 100%;，但它并不能解决问题。我还通过 W3C 验证了网页，并且所有内容都已检查，所以我认为它不是由任何缺失/未关闭的标签引起的。

这里是相关页面的网址：http://icengale.com/icenDeities-Mainen.html

我正在使用“重置”css 文件，但删除它并不能解决问题，所以我认为这不会导致问题。

非常感谢任何和所有帮助，谢谢！

【问题讨论】：

你试过repeat-y属性吗？
在 Firefox 中运行良好
你为什么要给你的身体上课？这是页面上的唯一元素，请改用body { ... style here ... }。

标签： html css xhtml-1.0-strict

【解决方案1】：

如果可行，请尝试以下 css。

.ice01 {
background:url(../images/iceBackground04.jpg) repeat-x 0 0;
margin: 0 100px; 
font-family: book antiqua; 
font-size: 19px; 
color: #12124c;}


#maincontent {
width: 88%;
background:url(../images/BlueParchment.jpg) repeat-x 0 0;
margin: 0px auto;
padding: 0px 32px 0px 32px;}

【讨论】：

那行不通，Swarnamayee Mallia。它确实启发了我做一些测试，背景图像在大约 32,750 像素处停止（我在背景图像上添加了一个边框并计算了它重复的次数）。它只在 Firefox 中停止。它在IE8中正常显示。我还没有测试过其他任何东西。