Question

我正在我网站上的一个页面上工作，其中包含相当多的数据，因此页面非常长。该页面包含主体的背景图像和带有背景图像的容器，两者都运行页面的整个长度（不是顶部或底部边距，也没有顶部或底部填充）。我遇到了背景图片的问题：它们没有以某些分辨率扩展到页面底部。我编码的屏幕宽度为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文件，但删除它不能解决问题，因此我认为这不会导致问题。

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

Answer 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;}

背景图像没有延伸到页面底部

1 个答案: