我应该在反应组件中放置整页背景图像吗？

Question

你好 Stack Overflow 社区，

我正在为我的网站创建一个全屏背景图像，但我不知道是否应该将图像放置在1） index.html 文件（任何 React 组件之外），2）主应用程序内组件（最高父组件），或3)更深一层：主 App 组件内的组件。

不确定这是否有意义？如果您有任何需要澄清的问题，请告诉我。我在网上搜索了大量内容，但没有找到任何可靠的答案。

我还附上了一张图片，其中包含我想要创建的内容的总体思路。

谢谢你！

*我正在使用的文件结构是使用 create-react-app 创建的。我知道我可能不需要为下图所示的网站使用 React，但它是为了练习。

Answer 1

如果图像作为您计划渲染的所有组件的背景，只需将其添加到页面中index.html，或者更准确地说，添加类似以下内容index.css并将其导入到index.js

body {
  margin: 0;
  padding: 0;

  /** background image */
  background-image: url("./img/background.jpg");
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
}