时间戳

首页 > 解决方案 > 如何制作填充 Gatsby 屏幕的背景图像？

css - 如何制作填充 Gatsby 屏幕的背景图像？

问题描述

我正在使用 Gatsby，我正在尝试编辑我的 CSS 来给自己一个背景图像，它会填满屏幕，然后在下面我只想要一个页脚。这没有页脚，但它是我想要的一个很好的例子。

我有

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:30 更新）

标签： cssgatsby

解决方案

如果要将其用作背景图像，则需要使其容器更宽更高，以使其适应屏幕的最大宽度和高度。使用相对单位可能对您有用。就像是：

.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代表视口高度和视口宽度。

推荐阅读