Background images working

src/App.tsx

@@ -1,4 +1,5 @@
 import {
+	Box,
 	DEFAULT_THEME,
 	MantineProvider,
 	createTheme,
@@ -23,6 +24,7 @@ import 'mantine-react-table/styles.css'; //import MRT styles
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
 import { useAtom } from 'jotai';
 import { appTheme } from './contexts/theme';
+import './index.css';
 
 function App() {
 	const { data, isFetched } = useQueryAPI({
@@ -63,8 +65,20 @@ function App() {
 				<MantineProvider theme={mantineTheme}>
 					<ThemeProvider theme={theme}>
 						<ModalsProvider>
-							<RouterProvider router={router} />
-							<ReactQueryDevtools initialIsOpen={false} />
+							<>
+								<Box
+									style={{
+										width: '100%',
+										height: '100%',
+										position: 'fixed',
+										background: `linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), no-repeat center url(../src/images/backgrounds/${theme.backgroundImage})`,
+										backgroundSize: 'cover',
+										zIndex: -1,
+									}}
+								/>
+								<RouterProvider router={router} />
+								<ReactQueryDevtools initialIsOpen={false} />
+							</>
 						</ModalsProvider>
 					</ThemeProvider>
 				</MantineProvider>