Should I place a full page background image in a react component?

问题

Hello Stack Overflow community,

I'm looking to create a full screen background image for my site, yet I can't figure out if I should place the image in 1) the index.html file (outside of any React components), 2) inside the main App component (the highest parent component), or 3) one level deeper: a component inside the main App component.

Not sure if this makes sense? Let me know if you have any clarifying questions. I've search a ton online, but haven't found any solid answers.

I've also attached an image with a general idea of what I'm looking to create.

Thank you!

*The file structure I'm working with was created with create-react-app. I know I probably don't need to use React for the site pictured below, but it's for practice.

回答1:

If the image serves as background to all components you plan to render, just add it to the index.html page, or more properly, add something like the following to index.css and import it into 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;
}

来源：https://stackoverflow.com/questions/54334225/should-i-place-a-full-page-background-image-in-a-react-component