Claude tried

static/css/background.css

@@ -2,10 +2,9 @@
     background-image: url("/img/webb-dark.png");
     position: absolute;
     top: 0;
-    bottom: 0;
     left: 0;
     width: 100%;
-    height: 200%;
+    height: 100%;
     overflow-y: hidden;
     z-index: -1;
 

themes/clortox/static/js/script.js

@@ -6,17 +6,23 @@ window.onload = function() {
         item.addEventListener("mouseover", scramble);
     });
 
+    // Set parallax height once on load
+    let parallax = document.querySelector('.parallax');
+    if (parallax) {
+        let content = document.querySelector('#content');
+        // Set height to content height but don't go below viewport height
+        let contentHeight = content.scrollHeight;
+        let parallaxHeight = Math.max(contentHeight, window.innerHeight);
+        parallax.style.height = parallaxHeight + "px";
+
+        // Add scroll listener for parallax effect
         window.addEventListener('scroll', function() {
-        let parallax = document.querySelector('.parallax')
             let scrollPosition = window.pageYOffset;
+            // Move background down slower than scroll (creates parallax depth)
+            parallax.style.transform = 'translateY(' + scrollPosition * 0.5 + 'px)';
+        });
+    }
 
-        let newSize = (document.querySelector('#content').offsetHeight * 0.8);
-        if(newSize < window.innerHeight)
-            newSize = window.innerHeight;
-        parallax.style.height = newSize + "px";
-
-        parallax.style.transform = 'translateY(' + scrollPosition * .5 + 'px)';
-    })
     document.querySelectorAll(".typewriter").forEach(item => {
         observer.observe(item);
     });