I attempted to add an image as a background to all pages, but encountered some challenges along the way. Initially, I tried setting the background image in the style of the body tag within index.html:
<body style="background-image: url(%PUBLIC_URL%/bp.jpg)">
However, this did not produce the desired result. Next, I moved the picture from the public folder to /src and added it to the body tag in index.css:
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
background-image: url("./bg.jpg");
}
Unfortunately, this method also failed to achieve the desired outcome. As a final attempt, I modified the App.css file which controls routing in my project:
In App.js:
import './App.css';
import { BrowserRouter as Router, Route } from "react-router-dom";
import CharacterFormView from "./views/CharacterFormView";
import SkillTreeView from "./views/SkillTreeView";
function App() {
return (
<div className="App">
<Router>
<Route exact path="/" component={CharacterFormView}/>
<Route path="/character-form" component={CharacterFormView}/>
<Route path="/skill-trees" component={SkillTreeView}/>
</Router>
</div>
);
}
export default App;
In App.css:
.App {
text-align: center;
background: url("./bg.jpg") no-repeat;
background-size: cover;
}
While this last attempt successfully set the background image for the first two routes, "/" and "/character-form", it only displayed up to half the page and did not extend to fullscreen. The third route, "/skill-trees", had no background image at all.
I am seeking a more efficient solution to apply the same fullscreen background image to all pages without needing to manually specify it in each .css file. Any guidance or suggestions would be greatly appreciated.
Thank you in advance.