From 37c0efad8df8c60221b4e3886f0fa99de0aece08 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Mon, 1 Mar 2021 14:05:54 +0000
Subject: [PATCH] Add position option to background image

---
 packages/standard-components/manifest.json    | 44 +++++++++++++++++++
 .../src/BackgroundImage.svelte                | 14 +++++-
 2 files changed, 56 insertions(+), 2 deletions(-)

diff --git a/packages/standard-components/manifest.json b/packages/standard-components/manifest.json
index 73b6e72377..3843fe9dd3 100644
--- a/packages/standard-components/manifest.json
+++ b/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"
+          }
+        ]
       }
     ]
   },
diff --git a/packages/standard-components/src/BackgroundImage.svelte b/packages/standard-components/src/BackgroundImage.svelte
index 9575efd74f..c78cdc87b6 100644
--- a/packages/standard-components/src/BackgroundImage.svelte
+++ b/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}>