From 3d702b0ca3218da702e1304d7af9a8b3c66d253a Mon Sep 17 00:00:00 2001
From: Starstrike <raiden89@live.com>
Date: Thu, 1 May 2025 15:35:04 -0400
Subject: [PATCH] Fix background image styling - Added proper z-indexing and
 overlay for better readability

---
 frontend/src/components/EventAdmin.tsx | 13 ++++++++++++-
 frontend/src/components/EventView.tsx  | 13 ++++++++++++-
 2 files changed, 24 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/EventAdmin.tsx b/frontend/src/components/EventAdmin.tsx
index 3a420e1..dea20a9 100644
--- a/frontend/src/components/EventAdmin.tsx
+++ b/frontend/src/components/EventAdmin.tsx
@@ -460,12 +460,23 @@ const EventAdmin: React.FC = () => {
         backgroundPosition: 'center',
         backgroundRepeat: 'no-repeat',
         backgroundAttachment: 'fixed',
+        backgroundColor: '#000',
         position: 'relative',
         overflowY: 'auto',
         py: 4,
+        '&::before': event?.wallpaper ? {
+          content: '""',
+          position: 'fixed',
+          top: 0,
+          left: 0,
+          right: 0,
+          bottom: 0,
+          backgroundColor: 'rgba(0, 0, 0, 0.5)',
+          zIndex: 0,
+        } : {},
       }}
     >
-      <Container maxWidth="lg">
+      <Container maxWidth="lg" sx={{ position: 'relative', zIndex: 1 }}>
         <Paper elevation={3} sx={{ p: { xs: 2, sm: 4 }, mt: 4 }}>
           <Box sx={{ mb: 4 }}>
             <Typography variant="h4" component="h2" color="primary" gutterBottom>
diff --git a/frontend/src/components/EventView.tsx b/frontend/src/components/EventView.tsx
index 6159edb..86ce805 100644
--- a/frontend/src/components/EventView.tsx
+++ b/frontend/src/components/EventView.tsx
@@ -142,12 +142,23 @@ const EventView: React.FC = () => {
         backgroundPosition: 'center',
         backgroundRepeat: 'no-repeat',
         backgroundAttachment: 'fixed',
+        backgroundColor: '#000',
         position: 'relative',
         overflowY: 'auto',
         py: 4,
+        '&::before': event?.wallpaper ? {
+          content: '""',
+          position: 'fixed',
+          top: 0,
+          left: 0,
+          right: 0,
+          bottom: 0,
+          backgroundColor: 'rgba(0, 0, 0, 0.5)',
+          zIndex: 0,
+        } : {},
       }}
     >
-      <Container maxWidth="lg">
+      <Container maxWidth="lg" sx={{ position: 'relative', zIndex: 1 }}>
         <Paper elevation={3} sx={{ p: { xs: 2, sm: 4 }, mt: 4 }}>
           <Box sx={{ mb: 4 }}>
             <Typography variant="h4" component="h2" color="primary" gutterBottom>