Add gradient background image to lookbook page

Author: spearwolf

apps/lookbook/src/images/so-mi-gradient-back-666x.webp

@@ -4,6 +4,7 @@ import LookbookHeader from '~components/LookbookHeader.astro';
 import TagCloudFilter from '~components/TagCloudFilter.astro';
 import Layout from '~layouts/Layout.astro';
 import backPattern from '../images/ricepaper-reduced-dark.png?url';
+import gradientBack from '../images/so-mi-gradient-back-666x.webp?url';
 ---
 
 <Layout title="2.5d lookbook">
@@ -33,10 +34,16 @@ import backPattern from '../images/ricepaper-reduced-dark.png?url';
   </div>
 </Layout>
 
-<style define:vars={{'page-background-pattern': `url(${backPattern})`}}>
+<style define:vars={{'page-background-pattern': `url(${backPattern})`, 'page-gradient-back': `url(${gradientBack})`}}>
   .back-pattern {
     background-color: var(--color-background);
-    background-image: var(--page-background-pattern);
-    background-repeat: repeat;
+    /* background-image: var(--page-background-pattern), var(--page-gradient-back);
+    background-repeat: repeat, no-repeat;
+    background-size: auto, contain;
+    background-position: top left, top center; */
+    background-image: var(--page-gradient-back);
+    background-repeat: no-repeat;
+    background-size: contain;
+    background-position: top center;
   }
 </style>