fix button bg image

Author: mProjectsCode

packages/core/src/modals/modalContents/buttonBuilder/ButtonBuilderModalComponent.svelte

@@ -162,9 +162,9 @@
 </SettingComponent>
 
 <SettingComponent name="Background image" description="A background image to use in the button.">
-	<span>{buttonConfig.backgroundImage ?? 'none'}</span>
+	<span style="word-break: break-word">{buttonConfig.backgroundImage ?? 'none'}</span>
 	<Button variant={ButtonStyleType.PRIMARY} onclick={() => changeBackgroundImage()} tooltip="Select from vault"
-		>Select</Button
+		>Change</Button
 	>
 </SettingComponent>
 

packages/core/src/utils/components/ButtonComponent.svelte

@@ -57,7 +57,7 @@
 	class:disabled={disabled}
 	class:mb-error={error}
 	style={cssStyle}
-	style:background-image={backgroundImage}
+	style:background-image={backgroundImage ? `url("${backgroundImage}")` : undefined}
 	aria-label={tooltip}
 	disabled={disabled}
 	onclick={event => click(event, ButtonClickType.LEFT)}

styles.css

@@ -99,6 +99,8 @@ div.mb-view-wrapper {
 	vertical-align: bottom;
 	/* Add a gap between text and icons. */
 	gap: var(--size-4-1);
+	background-size: cover;
+	background-position: center center;
 
 	&.mod-plain {
 		background: none;