I need help figuring out how to add a background image to my React app. I've searched for solutions on StackOverflow, but I'm still unsure. The image I want to use is named background.jpeg and it's located in the same folder as my App.js file. Below is the code snippet where I'd like to set the background. Thank you!
return (
<div>
<div className = "top">
<h1>Hit the button to generate a random top 25 all-time cd according to the Rolling Stone</h1>
</div>
<div className = "Outer">
<div>
<img src = {ImageArray[this.state.WhichRecord][0]} width = "400px" height = "400px"/>
<p></p>
<button onClick={this.RandomNumber}>Press me for a new album!</button>
<p>Artist: {ImageArray[this.state.WhichRecord][1]} </p>
<p>Album: {ImageArray[this.state.WhichRecord][2]} </p>
</div>
</div>
</div>
);
}
}
export default App;
Additionally, here is the progress I've made with the CSS styling:
.Outer {
display: flex;
justify-content: center;
align-items: center;
position: relative;
top: 50px;
}
.top {
display: flex;
justify-content: center;
}