'How to make background-image responsive in Material UI

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?

DOM

return <main className={content}>

CSS

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

cssreactjsmaterial-ui


Solution 1:[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/

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 AdityaSrivast

Related Questions