如何在 meteor/react 设置中制作全屏图片？

Question

我目前正在和我的朋友一起处理这个 repo：https://github.com/openteach/openteach。

我有一个无法修复的错误。我已经尝试了所有方法，但似乎没有任何效果？！

我附上了错误的图片。

任何 help/ideas 不胜感激。

谢谢。

漏洞图片： Bug

Answer 1

在body上设置背景，你就不会再有空隙了

body{
    background: url(assets/images/stardust.png);
}

高度之和没有填满整个页面，你只有<div class="App_component">

的背景

另一种方法是在 body 标签上设置 class：

<body class="App_component">

Answer 2

你可以按照 Mike King 的建议去做，只记得将背景大小也设置为覆盖：

background-size: cover;

这将确保背景始终覆盖其所有元素，无论图像大小如何。

另一件事可能是元素没有占据视口的所有高度。这可以通过设置相对于视口的高度来解决，例如：

body {
    height: 100vh;
    background-image: url(assets/images/stardust.png);
    background-size: cover;
}

How to make fullscreen picture in a meteor/react setup?