MuiCssBaseline override background image with opacity
i have been to apply a background image to my demo app writed with react, next and material-ui. In my _app.js I have this code:
import React from 'react'; import { ThemeProvider } from '@material-ui/core/styles'; import CssBaseline from '@material-ui/core/CssBaseline'; import theme from '../components/theme'; export default function App({Component, pageProps}) { return( <ThemeProvider theme={theme}> <CssBaseline /> <Component {...pageProps} /> </ThemeProvider> ) } I have a simple theme.js:
import { createMuiTheme } from '@material-ui/core/styles'; // Create a theme instance. const theme = createMuiTheme({ overrides: { MuiCssBaseline: { "@global": { body: { backgroundImage: "url(images/sfondo.jpg)", backgroundRepeat: "no-repeat", backgroundPosition: "center center", backgroundSize: "cover", backgroundAttachment: "fixed", height: "100%", } } } } }); In this mode I can see the background image. It’s works fine. If I add in the theme.js
opacity: 0.25
this is applied at all content of page but not at background image.
I suppose the I need to use a "::before" and z-index property, but I don’t know how apply this.
