html - 使背景图像填充背景

Question

这似乎是一个常见问题，但我看到的现有答案似乎对我不起作用。我有一个比宽高得多的背景图像。我希望高度为 body 高度的 100%。到目前为止我已经尝试过:

body, html {
    height: 100%;
    min-height: 100%;
}

body {
    background:url("NewLogo.png") no-repeat center center;
    background-size: 100% auto;
}

我也尝试过更改 background-size: cover; 但这也只会使图像变大但会切断顶部和底部。

Answer 1

使用包含。这将保证整个图像出现在容器中，没有任何东西被截断:

body {
    background:url("NewLogo.png") no-repeat center center;
    background-size: contain;
}