React JSX 背景位置未將圖像放置在 Material UI Grid 項中的右側居中

Question

我剛剛創建了一個單頁的網站組合，它非常完整，但是在將主屏幕的背景位置設置為中心右側時遇到了問題。 這是我的網站：

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

我的回購： https : //github.com/Bolmstead/Portfolio

我只想在將窗口大小調整為移動設備時顯示我的圖像。 我相信背景位置會解決這個問題嗎？ 背景大小是封面，我相信我做對了，但似乎遺漏了一些東西。 以下是我的家庭組件：

 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

你有一個錯字， backgoundPosition應該是backgroundPosition

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