如何在 Gatsby 中制作填满屏幕的背景图像？

Question

我正在使用 Gatsby，我正在尝试编辑我的 CSS 以便为自己提供一个填满屏幕的背景图片，然后在其下方我只想要一个页脚。 This 没有页脚，但这是我想要的一个很好的例子。

我有

body, html, #gatsby-focus-wrapper, #__gatsby {
    height: 100%;
}

.landingDiv {
    background-image: url("https://images.unsplash.com/photo-1493663284031-b7e3aefcae8e?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=750&q=80");
    height: 100%;

  /* Center and scale the image nicely */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

然而，背景并没有延伸到100%。我尝试将父容器设置为 100%，以便扩展此背景。这是现在的样子。

这是一张显示宽度的图片

这是此代码的代码笔 - https://codepen.io/norogoth/pen/zYwNqWX（已更新 3:30pm）

Answer 1

对象适合：覆盖而不是背景大小：覆盖；

Answer 2

如果你想把它用作背景图片，你需要让它的容器变宽变高以适应屏幕的最大宽度和高度。使用相对单位可能适合您。类似于：

.landingDiv {
    background-image: url("https://images.unsplash.com/photo-1493663284031-b7e3aefcae8e?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=750&q=80");
    height: 100%;

  /* Center and scale the image nicely */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
 
  /* making it 100% of the total width and height */ 
  height: 100vh;
  width: 100vw;
}

vh和vw分别代表视口高度和视口宽度。

如何在 Gatsby 中制作填满屏幕的背景图像？

How do I make a background image that fills the screen in Gatsby?

css

gatsby