diff --git a/packages/builder/src/components/design/AppPreview/componentStructure.json b/packages/builder/src/components/design/AppPreview/componentStructure.json
index 87bef3d3a1..bae4b009e9 100644
--- a/packages/builder/src/components/design/AppPreview/componentStructure.json
+++ b/packages/builder/src/components/design/AppPreview/componentStructure.json
@@ -49,6 +49,7 @@
       "heading",
       "text",
       "image",
+      "backgroundimage",
       "link",
       "icon",
       "embed"
diff --git a/packages/standard-components/manifest.json b/packages/standard-components/manifest.json
index cb321f1bb9..73b6e72377 100644
--- a/packages/standard-components/manifest.json
+++ b/packages/standard-components/manifest.json
@@ -294,6 +294,19 @@
       }
     ]
   },
+  "backgroundimage": {
+    "name": "Background Image",
+    "description": "A background image",
+    "icon": "ri-image-line",
+    "styleable": true,
+    "settings": [
+      {
+        "type": "text",
+        "label": "URL",
+        "key": "url"
+      }
+    ]
+  },
   "icon": {
     "name": "Icon",
     "description": "A basic component for displaying icons",
@@ -394,6 +407,11 @@
         "type": "boolean",
         "label": "New Tab",
         "key": "openInNewTab"
+      },
+      {
+        "type": "boolean",
+        "label": "External",
+        "key": "external"
       }
     ]
   },
diff --git a/packages/standard-components/src/BackgroundImage.svelte b/packages/standard-components/src/BackgroundImage.svelte
new file mode 100644
index 0000000000..332ae11049
--- /dev/null
+++ b/packages/standard-components/src/BackgroundImage.svelte
@@ -0,0 +1,28 @@
+<script>
+  import { getContext } from "svelte"
+
+  const { styleable } = getContext("sdk")
+  const component = getContext("component")
+
+  export let url = ""
+  $: style = url ? `background-image: url("${url}")` : ""
+</script>
+
+<div class="outer" use:styleable={$component.styles}>
+  <div class="inner" {style} />
+</div>
+
+<style>
+  .outer {
+    position: relative;
+  }
+
+  .inner {
+    position: absolute;
+    height: 100%;
+    width: 100%;
+    background-repeat: no-repeat;
+    background-size: cover;
+    background-position: top center;
+  }
+</style>
diff --git a/packages/standard-components/src/index.js b/packages/standard-components/src/index.js
index 14886e2a17..a9d8920895 100644
--- a/packages/standard-components/src/index.js
+++ b/packages/standard-components/src/index.js
@@ -31,5 +31,6 @@ export { default as cardhorizontal } from "./CardHorizontal.svelte"
 export { default as cardstat } from "./CardStat.svelte"
 export { default as icon } from "./Icon.svelte"
 export { default as search } from "./Search.svelte"
+export { default as backgroundimage } from "./BackgroundImage.svelte"
 export * from "./charts"
 export * from "./forms"