This issue has been consuming a lot of my time, and though I know the answer must be out there somewhere. My problem is quite similar to what's being discussed here. Essentially, I am trying to dynamically change the background image on button click by fetching a new image URL. The layout should include an input box, a button, and an icon centered on the page with the background image filling the entire screen.
As a CSS novice, I'm struggling with achieving the desired layout despite having the functionality working. Here is the code I have so far:
// App.js
function App() {
return (
<div>
<Background></Background>
<City />
<WeatherCard />
</div>
);
}
export default App;
And here is the background component:
// Background.js
const useStyles = makeStyles({
bgImage: {
/* Full height */
height: "100vh",
/* Center and scale the image nicely */
backgroundPosition: "center",
backgroundRepeat: "no-repeat",
backgroundSize: "cover",
},
});
const Background = () => {
const store = useSelector((store) => store);
const classes = useStyles();
const dispatch = useDispatch();
return (
<div
className={classes.bgImage}
style={{
backgroundImage: `url("some url")`,
}}
></div>
);
};
export default Background;
What I currently have can be seen here.