diff --git a/src/data/static/css/style.css b/src/data/static/css/style.css
index 1484ae0..9746f84 100644
--- a/src/data/static/css/style.css
+++ b/src/data/static/css/style.css
@@ -9,10 +9,7 @@ body {
     font-family: Arial, sans-serif;
     margin: 0;
     padding: 0;
-    background-image: url("{{ url_for('static', filename='img/backgrounds/' ~ background) }}");
-    background-size: cover;
-    background-repeat: no-repeat;
-    background-position: center;
+    background-color: #2c2c2c;
     color: #f8f9fa; /* Light text for readability */
     display: flex;
     flex-direction: column;
diff --git a/src/data/templates/base.html b/src/data/templates/base.html
index ed619e2..2897a27 100644
--- a/src/data/templates/base.html
+++ b/src/data/templates/base.html
@@ -6,6 +6,18 @@
     <!-- Bootstrap CSS -->
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
     <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
+    <style>
+    :root {
+        --bg-image: url('{{ url_for("static", filename="img/backgrounds/" ~ background) }}');
+    }
+
+    body {
+        background-image: var(--bg-image);
+        background-size: cover;
+        background-position: center;
+        background-repeat: no-repeat;
+    }
+</style>
 </head>
 <body>
 
