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