全屏背景图像 CSS

Question

我正在尝试让背景图像全屏显示，但无论我做什么，它都只会扩展到最底部组件的末端，所以大约在屏幕的中间位置。下面是我当前的代码，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 文件。我试过将背景样式放在主机部分，但得到了相同的结果。添加边距和填充可扩展背景图像的范围，但它不可用，因为它不会在屏幕尺寸改变时改变尺寸。

关于如何使图像适合屏幕大小的任何帮助？

感谢您的帮助。

Answer 1

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

全屏背景图像 CSS

Full Screen Background Image CSS

css

background-image

jsx

background-size

stenciljs