From d39d7263c5608c4eba5bdc10a4945ff820cd7758 Mon Sep 17 00:00:00 2001
From: Patrick Alvin Alcala <patrick_alv@yahoo.com>
Date: Fri, 1 Aug 2025 15:15:43 +0800
Subject: [PATCH 1/2] Updated README

---
 README.md | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/README.md b/README.md
index cb41af5..5e1a2ee 100644
--- a/README.md
+++ b/README.md
@@ -33,3 +33,8 @@ pnpm install
 ```
 pnpm update
 ```
+
+# To Use Background
+
+Place your background image in `assets/images/background.avif` or `assets/images/background.webp`.
+Then, enable by adding <Background image /> or <Background color="#123456">

From 2684f9faa66e3b912bc0bf21c429a39593ad1e3a Mon Sep 17 00:00:00 2001
From: Patrick Alvin Alcala <patrick_alv@yahoo.com>
Date: Fri, 1 Aug 2025 15:15:58 +0800
Subject: [PATCH 2/2] Added backgrund built-in component

---
 .../Background/Background.sass                |  1 +
 .../Background/Background.tsx                 | 27 +++++++++++++++++++
 2 files changed, 28 insertions(+)
 create mode 100644 src/builtin-components/Background/Background.sass
 create mode 100644 src/builtin-components/Background/Background.tsx

diff --git a/src/builtin-components/Background/Background.sass b/src/builtin-components/Background/Background.sass
new file mode 100644
index 0000000..1e0b5bc
--- /dev/null
+++ b/src/builtin-components/Background/Background.sass
@@ -0,0 +1 @@
+@use '/src/styles/classes.sass'
diff --git a/src/builtin-components/Background/Background.tsx b/src/builtin-components/Background/Background.tsx
new file mode 100644
index 0000000..40d93c7
--- /dev/null
+++ b/src/builtin-components/Background/Background.tsx
@@ -0,0 +1,27 @@
+import './Background.sass'
+import { Show } from 'solid-js'
+import backgroundAvif from '../../assets/images/background.avif'
+import backgroundWebp from '../../assets/images/background.webp'
+
+interface Props {
+  image?: boolean
+  color?: string
+}
+
+export default (props: Props) => {
+  return (
+    <>
+      <Show when={props.image}>
+        <picture class="fullscreen">
+          <source srcset={backgroundAvif.src} type="image/avif" />
+          <source srcset={backgroundWebp.src} type="image/webp" />
+          <img src={backgroundWebp.src} width="1920" height="auto" decoding="async" loading="lazy" alt="An image background" />
+        </picture>
+      </Show>
+
+      <Show when={!props.image}>
+        <div style={{ background: props.color }} class="fullscreen" />
+      </Show>
+    </>
+  )
+}