Refactor background image handling to use CSS variable for street2.webp across multiple stylesheets

Author: codergautam

components/home.js

@@ -2494,7 +2494,7 @@ export default function Home({ }) {
                 msUserSelect: 'none',
                 pointerEvents: 'none',
             }}>
-                <NextImage.default src={'./street2.webp'}
+                <NextImage.default src={asset('/street2.webp')}
                     draggable={false}
                     width={1920}
                     height={1080}
@@ -2543,7 +2543,7 @@ export default function Home({ }) {
 
                 {/* Loading overlay - covers iframe with background image to prevent white flicker */}
                 <div className={`loading-overlay ${loading ? 'loading-overlay--visible' : ''}`}>
-                    <NextImage.default src={'./street2.webp'}
+                    <NextImage.default src={asset('/street2.webp')}
                         draggable={false}
                         width={1920}
                         height={1080}

styles/Leaderboard.module.css

@@ -8,7 +8,7 @@
     rgba(20, 26, 57, 0.8) 50%,
     rgba(0, 0, 0, 0.9) 100%
   ),
-  var(--bg-street2, url("/street2.webp"));
+  var(--bg-street2);
   background-size: cover;
   background-position: center;
   background-attachment: fixed;

styles/MapPage.module.css

@@ -8,7 +8,7 @@
     rgba(0, 30, 15, 0.8) 50%,
     rgba(0, 0, 0, 0.9) 100%
   ),
-  var(--bg-street2, url("/street2.webp"));
+  var(--bg-street2);
   background-size: cover;
   background-position: center;
   background-attachment: fixed;
@@ -481,7 +481,7 @@
       rgba(0, 20, 10, 0.9) 50%,
       rgba(0, 0, 0, 0.95) 100%
     ),
-    var(--bg-street2, url("/street2.webp"));
+    var(--bg-street2);
   }
 }
 

styles/accountModal.css

@@ -26,7 +26,7 @@
         rgba(0, 30, 15, 0.8) 50%,
         rgba(0, 0, 0, 0.9) 100%
     ),
-    var(--bg-street2, url("/street2.webp"));
+    var(--bg-street2);
     background-size: cover;
     background-position: center;
     /* Changed from background-attachment: fixed to position: fixed */
@@ -349,7 +349,7 @@
             rgba(0, 20, 10, 0.9) 50%,
             rgba(0, 0, 0, 0.95) 100%
         ),
-        var(--bg-street2, url("/street2.webp"));
+        var(--bg-street2);
         background-size: cover;
         background-position: center;
     }