Add smooth parallax background pan

2026-02-03 01:15:33 +01:00
parent 84ebc25340
commit bb810584ee
2 changed files with 47 additions and 4 deletions
--- a/wwwroot/styles.css
+++ b/wwwroot/styles.css
@@ -8,6 +8,9 @@
        sans-serif;
    background: #f6e9d6;
    color: #2c1c0d;
+    --bg-scale: 115%;
+    --bg-x: 0px;
+    --bg-y: 0px;
 }

 *,
@@ -24,9 +27,12 @@
    align-items: center;
    gap: 16px;
    min-height: 100vh;
-    background:
-        url("background.png") center/cover no-repeat fixed,
-        #f6e9d6;
+    background-color: #f6e9d6;
+    background-image: url("background.png");
+    background-repeat: no-repeat;
+    background-attachment: fixed;
+    background-size: var(--bg-scale) var(--bg-scale);
+    background-position: calc(50% + var(--bg-x)) calc(50% + var(--bg-y));
 }

 .lang-field {