html - 调整窗口大小时如何使背景图像缩放以适合整个窗口？

Question

我试图让我的背景图像放大，因为我将窗口调整为较小的屏幕，以便它占据整个屏幕(高度和宽度)。当我开始时，我会调整窗口大小，背景图像会变小并重复。所以我发现这个 CSS 可以阻止图像重复并确保它覆盖屏幕的宽度(但不一定是高度)。

    .body-index {
       background-image: url("https:......jpeg");
       background-repeat: no-repeat;
       background-size: cover;
    }

现在，当我调整窗口大小时，背景图像会调整大小并且不会重复。但是由于图像继续变小，因此在移动平台上背景图像下方会出现空白区域。我怎样才能以不在移动平台上创建空白的方式调整图像大小？

Answer 1

你必须像这样使用它。

.body-index {
    background: url("../images/bg.jpg") no-repeat center center fixed; // All the background properties are set here.

//BG property is set for other browsers
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}