diff --git a/index.html b/index.html
index 3548ff4..08a1e53 100644
--- a/index.html
+++ b/index.html
@@ -53,7 +53,8 @@
   <!-- globalParallax -->
   <div class="parallax" id="global-parallax">
     <img src="./img/lbry_background_art.png" alt="bg-img" class="parallax-img" />
-    <div class="parallax-mask" style="background-color: rgb(30, 100, 230); opacity: 0.5;"></div>
+    <div class="parallax-mask"></div>
+    <div class="parallax-bg"></div>
     
     <!-- globalParallaxContent -->
     <div class="parallax-content">
diff --git a/lib/css/index.css b/lib/css/index.css
index 68c3a10..8bba8db 100644
--- a/lib/css/index.css
+++ b/lib/css/index.css
@@ -44,7 +44,7 @@ html {
 }
 
 .parallax .parallax-mask {
-  z-index: 0;
+  z-index: 1;
   position: absolute;
   width: 100%;
   height: 100%;
@@ -68,10 +68,20 @@ html {
   width: 100%;
   height: 100%;
   margin: 0;
+  position: absolute;
 }
 
 #global-parallax .parallax-mask {
   position: fixed;
+  background-color: rgb(30, 100, 230);
+  opacity: 0.5;
+}
+
+#global-parallax .parallax-bg {
+  position: fixed;
+  height: 100%;
+  background-color: black;
+  opacity: 1;
 }
 
 #global-parallax {