html - 调整大小时如何设置背景图像以适合浏览器窗口？

Question

我正在构建一个小型响应式页面。 在页面上有一个背景图像，上面有许多按钮。

我添加了下面的css来设置背景图片

.background{
    height: 100vh;
    width: 100%;
    background: url('https://images.pexels.com/photos/1563564/pexels-photo-1563564.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260') no-repeat;
    background-size: cover;
}

我的问题是，当我调整浏览器窗口大小时，按钮会垂直堆叠，然后用户可以导航到背景图像结束的底部，然后用户会看到一个大的空白区域。

我希望背景图像在调整大小时调整大小以适合浏览器窗口。

有什么想法吗？

编辑: 我在没有帮助的情况下尝试了你的建议。我将我的代码放在 StackBlitz 页面中: https://stackblitz.com/edit/angular-y1avtu?file=src%2Findex.html

调整窗口大小，您将看到按钮垂直堆叠，然后向下滚动，您将看到网页的一大块白色部分。这是我不想要的。

Answer 1

按如下方式更新您的 css :)。

.background{
    height: 100vh;
    width: 100%;
    background: url('https://images.pexels.com/photos/1563564/pexels-photo-1563564.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260') no-repeat;
    background-size: cover;
    background-attachment: fixed;
}