Move background to separate element

2025-11-24 00:37:34 +01:00
parent efac9ed7c1
commit 1c1bd647f1
3 changed files with 11 additions and 10 deletions
--- a/assets/noise.svg
+++ b/assets/noise.svg
@@ -1,9 +1,9 @@
 <!-- see also: https://grainy-gradients.vercel.app/ -->
-<svg viewBox='0 0 4000 4000' xmlns='http://www.w3.org/2000/svg'>
+<svg viewBox='0 0 800 800' xmlns='http://www.w3.org/2000/svg'>
    <filter id='noiseFilter'>
        <feTurbulence
                type='fractalNoise'
-                baseFrequency='0.62'
+                baseFrequency='0.50'
                numOctaves='3'
                stitchTiles='stitch'/>
    </filter>
--- a/index.html
+++ b/index.html
@@ -8,6 +8,7 @@
        <title>cblt-website</title>
    </head>
    <body>
+        <div id="background"></div>
        <div id="root"></div>
        <script type="module" src="/src/main.tsx"></script>
    </body>
--- a/src/App.css
+++ b/src/App.css
@@ -49,7 +49,7 @@
 }

 #root {
-    position: absolute;
+    position: relative;
    overflow: scroll;
    height: 100%;
    width: 100%;
@@ -61,10 +61,11 @@ html {

 body {
    font-family: veramono, monospace;
-    height: 100%;
+}

-    filter: contrast(400%) brightness(1000%);
-    background: #190a52;
+#background {
+    /*filter: contrast(400%) brightness(1000%);*/
+    /*background: #190a52;*/
    background:
            linear-gradient(177deg, rgba(25, 10, 82, 1) 0%, rgba(29, 0, 43, 0) 100%),
            url("/assets/noise.svg"),
@@ -76,8 +77,7 @@ body {
    bottom: 0;
    right: 0;
    left: 0;
-}
-
-#background {
-
+    min-height: 100%;
+    min-width: 100%;
+    z-index: -100;
 }