How to make an image-covered background in react

Question

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:

doesn't have one, and unfortunately, it requires a lot to open a react project there rn. that's why i've brought here the entire code. is there a specific thing you wanted to check that i didn't bring here? — Mike Hemilton
– Mike Hemilton, Commented Jun 1, 2022 at 13:18
ok wait, i found out a way to do that. here's the link: codesandbox.io/s/dazzling-perlman-vggskp?file=/src/App.js — Mike Hemilton
– Mike Hemilton, Commented Jun 1, 2022 at 13:22

Aman Sadhwani · Accepted Answer · 2022-06-02 04:15:23Z

1

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

answered Jun 2, 2022 at 4:15

Aman Sadhwani

3,6183 gold badges20 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Mike Hemilton Over a year ago

setting the backgroundSize as "cover" didn't help :(

Aman Sadhwani Over a year ago

I have added height: "100vh",

Collectives™ on Stack Overflow

How to make an image-covered background in react

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related