2 身体背景：如何设置背景的高度答案

【问题标题】：2 backgrounds on body: how to set the height for the backgrounds2 身体背景：如何设置背景的高度
【发布时间】：2012-11-23 08:30:28
【问题描述】：

我有这个代码：

body{
    margin: 0px;
    padding: 0px;
    background-image: url(images/header.png), url(images/footer.png);
    background-repeat: repeat-x, repeat;
    background-height: 50px , 400px; /* ?? */
    background-position: 0% 0%, 0% 100%;

}

我可以给 footer.png 指定一个高度以在该特定高度重复吗？

【问题讨论】：

我不确定我是否理解。 “在特定高度重复”是什么意思？
我的意思是第二个图像的高度为 200 px 或其他东西，但我需要重复该图像，但是当我重复时，图像将在我不需要的整个身体上重复：我需要背景以 x 100% 然后 400 px 或其他方式重复，我希望我现在清楚:)
最好创建单独的 div 并设置背景图像并设置该 div 的高度和宽度。

标签： css background

【解决方案1】：

你可以试试background-size:

body{
    margin: 0px;
    padding: 0px;
    background-image: url(images/header.png), url(images/footer.png);
    background-repeat: repeat-x, repeat-x;
    background-size: auto, auto 500px; // here give to background images height
    background-position: 0% 0%, 0% 100%;


}

关于background-sizeis here的更多信息。

【讨论】：

这是css3属性ie+9
多背景只支持IE9+
嗨 Rohit，请考虑在您的回答中省略“.....”，因为这会在帖子中产生很多其他人必须清理的噪音。此外，看起来有一个possible bug caused by this that made it so you had to edit your post a second time。避免这种情况的一种方法是停止添加点。 ;) 祝你好运！
不客气@RohitAzad。此外，看起来您消息中的“嗨”也是导致您问题的原因。我发布的链接有更多详细信息，说明为什么这种情况不断发生在你身上。祝你好运！ :)

【解决方案2】：

我建议你创建单独的 div 并指定它。

body {
    margin: 0px;
    padding: 0px;
    background-image: url(images/header.png), ;
    background-repeat: repeat-x;
    background-height: 50px , 400px; 
    background-position: 0% 0%, 0% 100%;
    div {
        background-image: url(images/footer.png);
        background-repeat: repeat;
        background-height: 50px , 400px;
    }
}

【讨论】：