Add position option to background image

packages/standard-components/manifest.json

@@ -304,6 +304,50 @@
         "type": "text",
         "label": "URL",
         "key": "url"
+      },
+      {
+        "type": "select",
+        "label": "Position",
+        "key": "position",
+        "defaultValue": "center center",
+        "options": [
+          {
+            "label": "Center Top",
+            "value": "center top"
+          },
+          {
+            "label": "Center",
+            "value": "center center"
+          },
+          {
+            "label": "Center Bottom",
+            "value": "center bottom"
+          },
+          {
+            "label": "Left Top",
+            "value": "left top"
+          },
+          {
+            "label": "Left Center",
+            "value": "left center"
+          },
+          {
+            "label": "Left Bottom",
+            "value": "left bottom"
+          },
+          {
+            "label": "Right Top",
+            "value": "right top"
+          },
+          {
+            "label": "Right Center",
+            "value": "right center"
+          },
+          {
+            "label": "Right Bottom",
+            "value": "right bottom"
+          }
+        ]
       }
     ]
   },

packages/standard-components/src/BackgroundImage.svelte

@@ -4,8 +4,18 @@
   const { styleable } = getContext("sdk")
   const component = getContext("component")
 
-  export let url = ""
-  $: style = url ? `background-image: url("${url}")` : ""
+  export let url
+  export let position
+
+  let style = ""
+  $: {
+    if (url) {
+      style += `background-image: url("${url}");`
+    }
+    if (position) {
+      style += `background-position: ${position};`
+    }
+  }
 </script>
 
 <div class="outer" use:styleable={$component.styles}>