add multiple bg

src/config/backgrounds.ts

@@ -0,0 +1,65 @@
+interface BackgroundImage {
+  url: string;
+  title: string;
+  artist: string;
+  source: string;
+  socials?: {
+    name: string;
+    link: string;
+  }[];
+}
+
+export const backgrounds: BackgroundImage[] = [
+  {
+    url: 'https://cdn.donmai.us/original/97/c8/__citlali_genshin_impact_drawn_by_ryrmcher__97c810ff6e992f1789f93e2edbb683a3.jpg',
+    title: 'Citlali (Genshin Impact)',
+    artist: 'ryrmcher',
+    source: 'https://danbooru.donmai.us/posts/6148600',
+    socials: [
+      {
+        name: "Twitter Post",
+        link: "https://x.com/ryrmcher/status/1878812100866560258"
+      },
+      {
+        name: "Artist's Twitter",
+        link: "https://x.com/ryrmcher"
+      }
+    ]
+  },
+  {
+    url: 'https://cdn.donmai.us/original/b9/f3/__original_drawn_by_ayanagi0319__b9f35c4a2460a2b9b3755a254f32624a.png',
+    title: 'ひとりぼっちのあさ',
+    artist: 'ayanagi0319',
+    source: 'https://danbooru.donmai.us/posts/6900673',
+    socials: [
+      {
+        name: "Twitter",
+        link: "https://twitter.com/ayanagi0319"
+      }
+    ]
+  },
+  // Add more backgrounds here!
+  // {
+  //   url: 'your-image-url',
+  //   title: 'Image Title',
+  //   artist: 'Artist Name',
+  //   source: 'source-url',
+  //   socials: [
+  //     { name: 'Twitter', link: 'twitter-url' }
+  //   ]
+  // }
+];
+
+export function getRandomBackground(): BackgroundImage {
+  if (backgrounds.length === 0) {
+    // Fallback background if array is empty
+    return {
+      url: 'https://cdn.donmai.us/original/97/c8/__citlali_genshin_impact_drawn_by_ryrmcher__97c810ff6e992f1789f93e2edbb683a3.jpg',
+      title: 'Citlali (Genshin Impact)',
+      artist: 'ryrmcher',
+      source: 'https://danbooru.donmai.us/posts/6148600',
+      socials: []
+    };
+  }
+  return backgrounds[Math.floor(Math.random() * backgrounds.length)];
+} 

src/layouts/Layout.astro

@@ -1,6 +1,7 @@
 ---
 import ThemeToggle from '../components/ThemeToggle.astro';
 import Analytics from '@vercel/analytics/astro';
+import { getRandomBackground } from '../config/backgrounds';
 
 interface Props {
   title: string;
@@ -12,6 +13,7 @@ const {
   description = "Discover and track your favorite comics with ComicK-RSS" 
 } = Astro.props;
 
+const background = getRandomBackground();
 const canonicalURL = new URL(Astro.url.pathname, Astro.site ?? 'https://comick-rss.vercel.app').toString();
 const isCreditsPage = Astro.url.pathname === '/credits';
 ---
@@ -43,7 +45,11 @@ const isCreditsPage = Astro.url.pathname === '/credits';
     
     <meta name="generator" content={Astro.generator} />
   </head>
-  <body class="min-h-screen bg-primary text-primary before:fixed before:inset-0 before:bg-[url('https://cdn.donmai.us/original/97/c8/__citlali_genshin_impact_drawn_by_ryrmcher__97c810ff6e992f1789f93e2edbb683a3.jpg')] before:bg-cover before:bg-center before:bg-no-repeat before:opacity-30 before:-z-10 before:transition-all before:duration-300" id="body-element">
+  <body 
+    class={`min-h-screen bg-primary text-primary before:fixed before:inset-0 before:bg-[url('${background.url}')] before:bg-cover before:bg-center before:bg-no-repeat before:opacity-30 before:-z-10 before:transition-all before:duration-300`} 
+    id="body-element"
+    style={`--bg-url: url('${background.url}')`}
+  >
     {!isCreditsPage && (
       <div class="fixed top-4 right-4 z-50">
         <div class="relative" id="settings-dropdown">
@@ -249,4 +255,10 @@ const isCreditsPage = Astro.url.pathname === '/credits';
   .animate-pulse {
     animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
   }
+</style>
+
+<style define:vars={{ bgUrl: background.url }}>
+  body::before {
+    background-image: var(--bg-url);
+  }
 </style>

src/pages/credits.astro

@@ -1,5 +1,6 @@
 ---
 import Layout from '../layouts/Layout.astro';
+import { backgrounds } from '../config/backgrounds';
 
 const title = "ComicK-RSS - Credits";
 const description = "Credits and attributions for ComicK-RSS";
@@ -7,24 +8,13 @@ const description = "Credits and attributions for ComicK-RSS";
 const credits = [
   {
     title: "Background Art",
-    items: [
-      {
-        name: "Citlali (Genshin Impact)",
-        artist: "ryrmcher",
-        link: "https://danbooru.donmai.us/posts/6148600",
-        description: "Beautiful artwork used as the site background",
-        socials: [
-          {
-            name: "Twitter Post",
-            link: "https://x.com/ryrmcher/status/1878812100866560258"
-          },
-          {
-            name: "Artist's Twitter",
-            link: "https://x.com/ryrmcher"
-          }
-        ]
-      }
-    ]
+    items: backgrounds.map(bg => ({
+      name: bg.title,
+      artist: bg.artist,
+      link: bg.source,
+      description: "Beautiful artwork used as site background",
+      socials: bg.socials
+    }))
   },
   {
     title: "Technologies",