React JSX background position not placing image to center right in Material UI Grid item

Question

I've just created a one page website portfolio and it is pretty much complete, but having issues with setting the background position of the home screen to center right. Here is my site:

https://berkley-portfolio.netlify.app/

My repo: https://github.com/Bolmstead/Portfolio

I just want the image of me to appear when resizing the window to mobile. I believe background-position would fix this right? The background size is cover, and I believe I am doing it correctly, but seem to be missing something. Below is my home component:

 import React, { useEffect } from "react"; import Grid from "@material-ui/core/Grid"; import Typography from "@material-ui/core/Typography"; import { makeStyles } from "@material-ui/core/styles"; import Container from "@material-ui/core/Container"; const useStyles = makeStyles((theme) => ({ homeContainer: { backgroundImage: `url(/images/home2.jpg)`, height: "103vh", backgroundSize: "cover", backgoundPosition: "center right" }, overlay: { zIndex: 1, height: "100%", width: "100%", backgroundSize: "cover", background: "rgba(0, 0, 0, 0.5)", }, firstName: { fontWeight: "bold", color: "white" }, lastName: { fontWeight: "bold", color: "#FFC220" }, caption: { fontWeight: "bold", color: "white" }, })); export default function Home() { const classes = useStyles(); const [fadedIn, setFadedIn] = React.useState(false); useEffect(() => { async function fadeInHomeScreen() { setFadedIn((prev) => !prev); } fadeInHomeScreen(); }, []); return ( <Grid item xs={12} className={classes.homeContainer}> <a id="Home"> <Grid container alignItems="center" justify="center" direction="row" className={classes.overlay} > <Grid item xs={12} align="center" justify="center"> <Container maxWidth="md" align="center" justify="center" className={classes.container}> <Typography m={12} variant="h2" component="h2" className={classes.firstName} display="inline" > Berkley{" "} </Typography> <Typography m={12} variant="h2" component="h2" className={classes.lastName} display="inline" > Olmstead </Typography> <Typography m={12} variant="h6" component="h6" className={classes.caption} > I'm a Full-Stack Developer </Typography> </Container> </Grid> </Grid> </a> </Grid> ); }

Answer 1

You have a typo, backgoundPosition should be backgroundPosition

homeContainer: {
  backgroundImage: `url(/images/home2.jpg)`,
  height: "103vh",
  backgroundSize: "cover",
  backgroundPosition: "center right"
},