Updated

@dasig/components/Background.astro

@@ -0,0 +1,50 @@
+---
+import * as fs from 'fs'
+import webpPath from '../images/background.webp'
+import avifPath from '../images/background.avif'
+import noBackground from '../images/no-background.webp'
+
+interface Props {
+  image?: boolean
+}
+
+const { image } = Astro.props
+
+let imageLoaded = false
+
+const checkBackground = () => {
+  if (!fs.existsSync(avifPath.src) && !fs.existsSync(webpPath.src)) {
+    imageLoaded = true
+  } else {
+    imageLoaded = false
+  }
+}
+
+checkBackground()
+---
+
+{
+  image &&
+    (imageLoaded ? (
+      <picture class="fullscreen">
+        <source srcset={avifPath.src} type="image/avif" />
+        <source srcset={webpPath.src} type="image/webp" />
+        <source srcset={noBackground.src} type="image/webp" />
+        <img width="1920" height="auto" decoding="async" loading="lazy" alt="An image background" />
+      </picture>
+    ) : (
+      <picture class="fullscreen">
+        <source srcset={noBackground.src} type="image/webp" />
+        <img width="1920" height="auto" decoding="async" loading="lazy" alt="An alternative background if found no image background" />
+      </picture>
+    ))
+}
+
+<style lang="sass">
+  @use '../../configs/design/site.sass' as design
+
+  :root
+    color-scheme: light dark
+    background-color: light-dark(design.$light-background, design.$dark-background)
+    transition: background-color 0.6s ease-out
+</style>