Reference file in public folder from CSS in create-react-app

Question

I am using creat-react-app (CRA) and simply want to include a png file placed in the public folder via CSS (I keep all image files there). Now I am trying to reference this imag

Answer 1

Just use a / before the name, this will make it relative to the build output root, which includes anything in the public folder.

so for the question asked above:

.App-header {
  background-color: #222;
  height: 150px;
  padding: 20px;
  color: white;
  background-image: url("/example.png");
}

the critical part being

/example.png 

refers to a file, example.png, that is in the public folder