Tengo una imagen y necesito hacer que cubra todo el fondo.

El problema es que, por alguna razón, la imagen no cubre todo el fondo y siempre se detiene en algún lugar donde coloco otro objeto, y nunca va más allá de esto.

Estoy usando material ui y mi código se ve así

 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> ); }

Este es el resultado que obtengo: