title: How to use backgroundColor and backgroundImage one on top of another
body: <p>I am using react/typescript with material UI. I want to use a background image and background color both together like color transparent. Here is my code snippet:</p>
  <pre><code> return (
  //Todo need to do one more level of refactor   
    &lt;div style={{ flex: 1, backgroundImage: `url(&quot;https://Content/images/backgrounds/91.jpg&quot;)`, backgroundSize: &quot;cover&quot;, height: &quot;100vh&quot;, zIndex: 2 }}&gt;
    &lt;Grid
      direction=&quot;column&quot;
      alignItems=&quot;center&quot;
      container
      justifyContent=&quot;center&quot;
      sx={{height: &quot;100vh&quot;, backgroundColor: 'rgba(0,0,235,0.3)', color:'white', zIndex: -1}}&gt;
      &lt;Grid item&gt;
        &lt;Paper&gt;
  </code></pre>
  <p>But here only color is displayed, It should be display images also both together with transparent.
  Please help, thanks.</p>