how to add background image to box in mui-CodePudding

I am trying to add a background image to Box component of mui but it dosen't work I am providing my code

const Main = () => {
  return (
    <Box 
     sx={{backgroundImage:'images/cover.jpeg'}}
     height='385px'
    >
      
    </Box>
  )
}

CodePudding user response：

You're not far from it. You just need to add the path to the file preceded by url, for example:

const Main = () => {
  return (
    <Box
      sx={{
        backgroundImage: "url('images/cover.jpeg')",
        backgroundRepeat: "no-repeat",
        height: '385px',
        width: '385px'
      }}
    >
    
    </Box>
  );
};

(assuming images/cover.jpeg is the correct path to your image.)

Working CodeSandbox: https://codesandbox.io/s/mui-box-background-image-wcseex?file=/demo.js

CodePudding user response：

Create Your Box Image Marquee Using Select You Need Area Move to You need Background

Backgroun Layer Send to Backword Form Layer List

CodePudding user response：

const Main = () => {
  return (
    <Box
          sx={{
            backgroundImage: `url("./images/cover.jpeg")`,
            backgroundPosition: `right bottom`,
            backgroundRepeat: `no-repeat`,
            backgroundSize: `300px 300px`,
            height: "100%",
            width: "100%",
          }}
        > 
      
    </Box>
  )
}

Make sure image url is correct and need to give some size to adjust the layout