如何在Material UI中使背景图像响应

Question

I'm trying to fix a problem with my background-image when I resize the browser. I have the background-image height on my application set to '100vh' which fills the entire page. When I resize the browser to a smaller width, the background image gets cut off. Changing height to '100%' fixes this when the page is responsive BUT 100% shows the image cut off when I am back to regular desktop size because it only fills the background the size of the div.

I'm using Material UI. How would I go about responsively changing the background size?

return <main className={content}>                      

content: {
    flexGrow: 1,
    padding: theme.spacing(3),
    height: '100vh',
    textAlign: 'center',
    backgroundImage: `url(${Background})`,
    backgroundRepeat: "no-repeat",
    backgroundPosition: "center center",
    backgroundSize: "cover",
    backgroundAttachment: "fixed",
  },

I tried adding this within my content style class but it didn't make a difference

[theme.breakpoints.down('lg')]: {
      height: '100%'
    }

Any suggestions? Thanks

Answer 1

As such there is no class for responsive image, if you are searching for one, in material-ui. But you can try with the grid , container or breakpoint layouts.
Please refer:
https://material-ui.com/components/container/
https://material-ui.com/customization/breakpoints/
https://material-ui.com/components/grid/
https://material-ui.com/guides/responsive-ui/