Solution 1 :

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.

     backgroundImage: `url("some url")`,
    <input type="text" />
    <button type="button">button</button>

Problem :

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 (
          <City />
          <WeatherCard />

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 (
          backgroundImage: `url("some url")`,

  export default Background;

This is what i getenter image description here


Comment posted by Erdem Öntaş

I tried to design everything as a react component. Background has bacgkround image and correspond css as shown above. Button and input box are also a react component. So when I put City and WeatherCard component child of Background, I only see background image, not other components

Comment posted by amanda-ariyaratne

Can you reproduce it on or something similar? Also, try giving a lower z index to the div element and relatively higher z index to the children

Comment posted by amanda-ariyaratne

I have edited the answer to change the CSS properties to resemble javascript object (as used in react) and added alignItems and zIndex properties