How to make an image-covered background in react-CodePudding

I have an image and i need to make it cover all of the background.

The problem is, that for some reason the image isn't covering all of the background, and it always stops somwhere where i put another object, and never goes farther then this.

Im using material ui and my code looks like this

import { Image } from "../images";
import { TextField } from "@mui/material";

const useStyles = makeStyles({
Background: {
    display: "flex",
    alignItems: "center",
    justifyContent: "center",
    justifyItems: "center",
    flexDirection: "row-reverse",
    width: "100%",
    height: "100%",
    backgroundImage:  `url(${Image})`,
    backgroundSize: "cover",
    backgroundRepeat: 'no-repeat',
    backgroundPosition: '50% 10%',
  }
})

function Login() {
  const classes = useStyles();

  return (
    <div className={classes.Background}>
       <TextField></TextField>
    </div>
  );
}

This is the result i get:

CodePudding user response：

Try this style

Background: {
    display: "flex",
    alignItems: "center",
    justifyContent: "center",
    justifyItems: "center",
    flexDirection: "row-reverse",
    width: "100%",
    height: "100vh",
    backgroundImage: `url(${asd})`,
    backgroundSize: "cover",
    backgroundRepeat: "no-repeat",
    backgroundPosition: "50% 10%"
  }