title: How to make background-image responsive in Material UI
body: <p>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.</p>
  
  <p>I'm using Material UI. How would I go about responsively changing the background size?</p>
  
  <p><b>DOM</b></p>
  
  <pre><code>return &lt;main className={content}&gt;                      
  </code></pre>
  
  <p><b>CSS</b></p>
  
  <pre><code>content: {
      flexGrow: 1,
      padding: theme.spacing(3),
      height: '100vh',
      textAlign: 'center',
      backgroundImage: `url(${Background})`,
      backgroundRepeat: "no-repeat",
      backgroundPosition: "center center",
      backgroundSize: "cover",
      backgroundAttachment: "fixed",
    },
  </code></pre>
  
  <p>I tried adding this within my content style class but it didn't make a difference</p>
  
  <pre><code>[theme.breakpoints.down('lg')]: {
        height: '100%'
      }
  </code></pre>
  
  <p>Any suggestions? Thanks</p>