Made the bgGrad dithered using a png

Made the bgGrad dithered using a png

modified the js so the fallback background would be the linear-gradient while the image is loading, or if it fails to load

css/style.css

@@ -52,7 +52,7 @@ body::-webkit-scrollbar-thumb:hover {
 }
 
 #bgGrad {
-    background: linear-gradient(var(--background), var(--backgroundGrad));
+    background-size: 100% 100%;
     width: 100vw;
     height: 100vh;
     top: 0;
@@ -80,7 +80,7 @@ header {
     position: absolute;
     width: 100%;
     height: 100%;
-    background: linear-gradient(transparent, rgba(10,10,10,0.3));
+    background: linear-gradient(transparent, rgba(10,10,10,0.2));
     z-index: -1;
     opacity: 0;
     transition: ease;

js/script.js

@@ -1,3 +1,25 @@
+var bgGrad = document.getElementById('bgGrad');
+var imageUrl = '/media/images/grad.png';
+
+// Display linear gradient while the image is loading
+bgGrad.style.backgroundImage = 'linear-gradient(var(--background), var(--backgroundGrad))';
+
+// Create an image element
+var img = new Image();
+
+// Set the image source
+img.src = imageUrl;
+
+// When the image loads successfully, switch the background to the image
+img.onload = function() {
+    bgGrad.style.backgroundImage = `url(${img.src})`;
+};
+
+// If the image fails to load, keep the linear gradient as the background
+img.onerror = function() {
+    console.log("Image failed to load");
+};
+
 window.addEventListener('DOMContentLoaded', function () {
     const currentPageUrl = window.location.pathname || '/'; // Use '/' if pathname is empty
     const headerSolid = document.getElementById('headerSolid');