I recently tried to set a background image for my demo application built with React, Next, and Material-UI. In my _app.js file, I included the following 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 defined a simple theme in 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%",
}
}
}
}
});
The background image is displayed successfully using this approach. Everything seems to work well.
However, when I add opacity: 0.25 to the theme.js file,
it applies the opacity to all content on the page except for the background image.
I assume that I may need to use the '::before' selector and z-index property to address this issue, but I am unsure about how to implement it.