Question

我试图让我的网站有2个背景，第一个背景在顶部，第二个在页脚中，目前我正在使用以下代码：

body { 
background: url(images/bgfooter.png) bottom center repeat-x, url(images/bgheader.png) top center repeat-x;
}

当页面大于屏幕高度时，这个css运行良好，但是我有一些高度为500px的页面，在这些情况下，bgfooter没有显示在页脚中，

我想添加这样的内容，

body { 
background: url(images/bgfooter.png) bottom center repeat-x, url(images/bgheader.png) top center repeat-x;
min-width: screensize;
}

任何选择？

Answer 1

您可以在CSS3中设置双重背景

background: 
url(number.png) 600px 10px no-repeat,  /* On top,    like z-index: 4; */
url(thingy.png) 10px 10px no-repeat,   /*            like z-index: 3; */
url(Paper-4.png);                      /* On bottom, like z-index: 1; */

Answer 2

将背景img设置为正文，然后为页脚设置单独的背景img。

body { 
background: url(images/bgheader.png) top center repeat-x;
}

#footer {
background: url(images/bgfooter.png) bottom center repeat-x;
}

您的HTML

<html>
<body>

<div id="footer">
</div> <!-- END OF FOOTER DIV -->

</body>
</html>

现在您已将背景img设置为页脚，您可以根据您的喜好调整页脚和正文的任何其他属性。

2个背景，1个在顶部，1个在屏幕或页面页脚

2 个答案: