diff --git a/packages/standard-components/manifest.json b/packages/standard-components/manifest.json
index 6b5f8d99b..5cca0d7e3 100644
--- a/packages/standard-components/manifest.json
+++ b/packages/standard-components/manifest.json
@@ -742,6 +742,7 @@
     "name": "Background Image",
     "description": "A background image",
     "icon": "Images",
+    "styles": ["size"],
     "illegalChildren": ["section"],
     "settings": [
       {
diff --git a/packages/standard-components/src/BackgroundImage.svelte b/packages/standard-components/src/BackgroundImage.svelte
index c78cdc87b..d81e6c800 100644
--- a/packages/standard-components/src/BackgroundImage.svelte
+++ b/packages/standard-components/src/BackgroundImage.svelte
@@ -1,5 +1,6 @@
 <script>
   import { getContext } from "svelte"
+  import Placeholder from "./Placeholder.svelte"
 
   const { styleable } = getContext("sdk")
   const component = getContext("component")
@@ -18,13 +19,24 @@
   }
 </script>
 
-<div class="outer" use:styleable={$component.styles}>
-  <div class="inner" {style} />
-</div>
+{#if url}
+  <div class="outer" use:styleable={$component.styles}>
+    <div class="inner" {style} />
+  </div>
+{:else}
+  <div
+    class="placeholder"
+    use:styleable={{ ...$component.styles, empty: true }}
+  >
+    <Placeholder />
+  </div>
+{/if}
 
 <style>
   .outer {
     position: relative;
+    width: 100%;
+    height: 400px;
   }
 
   .inner {
@@ -35,4 +47,11 @@
     background-size: cover;
     background-position: center center;
   }
+
+  .placeholder {
+    display: grid;
+    place-items: center;
+    height: 75px;
+    width: 150px;
+  }
 </style>