Add blurred background image behind main content

- Position the main container relatively to allow absolute positioning of background
- Add pseudo-element with background image, blur effect and scaling
- Ensure main image stays above background with z-index
- Improve visual appeal while maintaining focus on primary content

static/index.html

@@ -18,11 +18,29 @@
             align-items: center;
             height: 100vh;
             overflow: hidden;
+            position: relative;
+        }
+        body::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background-image: url('_.jpeg');
+            background-size: cover;
+            background-position: center;
+            background-repeat: no-repeat;
+            filter: blur(20px);
+            transform: scale(1.1);
+            z-index: -1;
         }
         img {
             width: 100%;
             height: 100%;
             object-fit: contain;
+            position: relative;
+            z-index: 1;
         }
     </style>
 </head>