'How to use backgroundColor and backgroundImage one on top of another

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:

 return (
//Todo need to do one more level of refactor   
  <div style={{ flex: 1, backgroundImage: `url("https://Content/images/backgrounds/91.jpg")`, backgroundSize: "cover", height: "100vh", zIndex: 2 }}>
  <Grid
    direction="column"
    alignItems="center"
    container
    justifyContent="center"
    sx={{height: "100vh", backgroundColor: 'rgba(0,0,235,0.3)', color:'white', zIndex: -1}}>
    <Grid item>
      <Paper>

But here only color is displayed, It should be display images also both together with transparent. Please help, thanks.

cssreactjstypescript


Sources

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

Source: Stack Overflow

Solution Source

Related Questions