CODEWITHSUNDEEP
javascriptreactjsimagematerial-ui
Mike Hemilton
Mike Hemilton

Reputation: 111

How to make an image-covered background in react

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:

Upvotes: 1

Views: 693

Answers (1)

Aman Sadhwani
Aman Sadhwani

Reputation: 3658

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%"
  }

Upvotes: 1

Related Questions