fixed background image in improved theme

PPLBandage · Oct 18, 2024 · 6074c6e · 6074c6e
1 parent f4c0346
commit 6074c6e
Show file tree

Hide file tree

Showing 2 changed files with 3 additions and 50 deletions.
diff --git a/src/app/modules/components/me.module.tsx b/src/app/modules/components/me.module.tsx
@@ -34,8 +34,7 @@ const Default = ({ data, islogged, color }: { data: Query, islogged: boolean, co
 
 const ImprovedTheme = ({ data, islogged }: { data: Query, islogged: boolean }) => {
     return (
-        <div className={style_sidebar.background_image_container}>
-            {islogged && data?.avatar && <Image src={data?.avatar} alt="" width={512} height={512} className={style_sidebar.background_image} quality={100} priority={true} />}
+        <div className={style_sidebar.background_image_container} style={{ backgroundImage: `url("${data?.avatar}")` }}>
             <div className={`${style_sidebar.card} ${style_sidebar.card_improved}`}>
                 <div className={`${style_sidebar.avatar_container} ${!islogged && style_sidebar.placeholders}`}>
                     {islogged && data?.avatar && <Image src={data?.avatar} alt="" width={150} height={150} priority={true} draggable={false} />}

diff --git a/src/app/styles/me/sidebar.module.css b/src/app/styles/me/sidebar.module.css
@@ -169,54 +169,8 @@
     flex-direction: column;
     align-items: stretch;
     justify-content: center;
-}
-
-
-.background_image {
-    position: absolute;
-    z-index: -1;
-    width: 100%;
-    height: auto;
-}
-
-.card_improved {
-    background: none;
-    backdrop-filter: blur(7px);
-}
-
-.background_image_container {
-    overflow: hidden;
-    position: relative;
-    border-radius: 15px;
-
-    display: flex;
-    flex-direction: column;
-    align-items: stretch;
-    justify-content: center;
-}
-
-
-.background_image {
-    position: absolute;
-    z-index: -1;
-    width: 100%;
-    height: auto;
-}
-
-.card_improved {
-    background: none;
-    backdrop-filter: blur(7px);
-}
-
-.background_image_container {
-    overflow: hidden;
-    position: relative;
-    border-radius: 15px;
-
-    display: flex;
-    flex-direction: column;
-    align-items: stretch;
-    justify-content: center;
+    background-position: center;
+    background-size: cover;
 }
 
 .discord_id {