全屏背景图片 CSS

如何解决全屏背景图片 CSS

我试图让背景图像全屏显示，但无论我做什么，它都只会延伸到最底部组件结束的位置，所以大约在屏幕的中间位置。以下是我当前的代码、CSS 和 JSX，因为我使用的是 Stenciljs。

//JSX
<Host>
  <div class="main>
    <login-Box></login-Box>
  </div>
<Host>

//CSS
host {
  display: block;
}

.main {
  background-image: url("test.jpg");
  background-size: cover;
  min-width: 100%;
  min-height: 100%;
}

login-Box 是我的另一个 Stenciljs 组件，它有自己的 .css 文件。我试过将背景样式放在主机部分，但得到了相同的结果。添加边距和内边距会扩展背景图像的跨度，但它无法使用，因为当屏幕尺寸改变时它不会改变尺寸。

有关如何使图像适合屏幕尺寸的任何帮助？

感谢您的帮助。

解决方法

尝试将 'position:absolute' 添加到您的 .main 类