Question

我有一个自适应网站，我正在尝试设置背景图片，以便高度始终为100％。宽度并不重要，但图片底部的元素总是需要显示。虽然我无法正确编码：

CSS：

body.cms-home .main-container {
    margin-top: 20px;
    background-image: url("../images/landing.jpg");
    background-repeat: no-repeat;
    height: 100%;
    background-position: center;
    width: auto;

HTML：

 <div class="main-container">
            </div>

我的网站是通过Magneto，但我认为不应该与CSS有任何不同。

我错过了什么？

更新：只是为了确认，因为似乎每个人都感到困惑。我希望我的背景图像始终为100％（不短）。因此，如果缩短浏览器，图像会缩小以确保始终显示图像的完整高度。所以我猜图像大小由浏览器的高度决定。

Answer 1

body.cms-home .main-container {
    margin-top: 20px;
    background-image: url("../images/landing.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

Answer 2

尝试使用：background-size: cover;

Answer 3

您可以使用vh大小调整元素。它代表viewport height，并且在大多数现代浏览器中都支持它。将其应用于.main-container元素，以便始终为浏览器窗口提供完整的高度和宽度。

body.cms-home .main-container {
    background-image: url("../images/landing.jpg");
    background-repeat: no-repeat;
    height: 100vh;
    width: 100%;
    background-size: cover;
    background-position: center;
}

请注意，如果您的页面可滚动，您可能还想给它一个position: fixed。

<强> Working Demo

响应式网站 - 高度始终100％

3 个答案: