身体上的2个背景：如何设置背景的高度

Question

我有这段代码：

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一个在特定高度重复的高度吗？

Answer 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-size is here的更多信息。

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