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};` + } + }