wouter/WebHome
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Move background to separate element

Browse Source
This commit is contained in:
Wouter van Veelen
2025-11-24 00:37:34 +01:00
parent efac9ed7c1
commit 1c1bd647f1
3 changed files with 11 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
assets/noise.svg
View File

@@ -1,9 +1,9 @@
<!-- see also: https://grainy-gradients.vercel.app/ --> <!-- 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'> <filter id='noiseFilter'>
<feTurbulence <feTurbulence
type='fractalNoise' type='fractalNoise'
baseFrequency='0.62' baseFrequency='0.50'
numOctaves='3' numOctaves='3'
stitchTiles='stitch'/> stitchTiles='stitch'/>
</filter> </filter>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 403 B

After

Width:  |  Height:  |  Size: 401 B

1
index.html
View File

@@ -8,6 +8,7 @@
<title>cblt-website</title> <title>cblt-website</title>
</head> </head>
<body> <body>
<div id="background"></div>
<div id="root"></div> <div id="root"></div>
<script type="module" src="/src/main.tsx"></script> <script type="module" src="/src/main.tsx"></script>
</body> </body>

16
src/App.css
View File

@@ -49,7 +49,7 @@
} }
#root { #root {
position: absolute; position: relative;
overflow: scroll; overflow: scroll;
height: 100%; height: 100%;
width: 100%; width: 100%;
@@ -61,10 +61,11 @@ html {
body { body {
font-family: veramono, monospace; font-family: veramono, monospace;
height: 100%; }
filter: contrast(400%) brightness(1000%); #background {
background: #190a52; /*filter: contrast(400%) brightness(1000%);*/
/*background: #190a52;*/
background: background:
linear-gradient(177deg, rgba(25, 10, 82, 1) 0%, rgba(29, 0, 43, 0) 100%), linear-gradient(177deg, rgba(25, 10, 82, 1) 0%, rgba(29, 0, 43, 0) 100%),
url("/assets/noise.svg"), url("/assets/noise.svg"),
@@ -76,8 +77,7 @@ body {
bottom: 0; bottom: 0;
right: 0; right: 0;
left: 0; left: 0;
} min-height: 100%;
min-width: 100%;
#background { z-index: -100;
} }