Add the following to bgImage class.

position: "relative",
display: "flex",
justifyContent: "center",
alignItems: "center",
zIndex: -1

Input box and button as children of the div element as follows.

<div
    className={classes.bgImage}
    style={{
     backgroundImage: `url("some url")`,
    }}
>
    <input type="text" />
    <button type="button">button</button>
</div>

this probably has answer somewhere but it took so much time from me. My problem is so similar to here Here. Based on button click I want to fetch a new image url and change background image dynamically. So basically there will be a input box, button and background image.

I am very beginner with css and what I want is that input, button and icon are being shown in the center of the page and background image as fullscreen. Functionality is done but I couldnt get done the appearance.

Here is what I did so far:

// App.js

function App() {
  return (
    <div>
      <Background></Background>
          <City />
          <WeatherCard />
    </div>
  );
}

export default App;

And backgroud 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;

This is what i get