diff --git a/assets/javascripts/discourse/components/rewind.gjs b/assets/javascripts/discourse/components/rewind.gjs
index 282c72d..6a4b43c 100644
--- a/assets/javascripts/discourse/components/rewind.gjs
+++ b/assets/javascripts/discourse/components/rewind.gjs
@@ -70,6 +70,9 @@ export default class Rewind extends Component {
     >
 
       <div class="rewind">
+        <div class="background-1">
+        </div>
+        <div class="background-2"></div>
         {{#if this.loadingRewind}}
           <div class="rewind-loader">
             <div class="spinner small"></div>
diff --git a/assets/stylesheets/common/rewind.scss b/assets/stylesheets/common/rewind.scss
index 9f112a0..32e67c8 100644
--- a/assets/stylesheets/common/rewind.scss
+++ b/assets/stylesheets/common/rewind.scss
@@ -34,17 +34,25 @@
   position: relative;
   overflow: hidden;
   max-width: 960px;
+  background: var(--secondary);
+}
+
+.background-1 {
   background: url(/plugins/discourse-rewind/images/bg-1.png);
   background-size: cover;
-  &::before {
-    content: "";
-    display: block;
-    position: absolute;
-    width: 100%;
-    height: 300%;
-    background: url(/plugins/discourse-rewind/images/bg-2.png);
-    background-size: contain;
-  }
+  position: absolute;
+  transform: translateY(0px);
+  width: 100%;
+  height: 100%;
+}
+
+.background-2 {
+  position: absolute;
+  width: 100%;
+  height: 300%;
+  background: url(/plugins/discourse-rewind/images/bg-2.png);
+  background-size: contain;
+  transform: translateY(0px);
 }
 
 .rewind__scroll-wrapper {