Fix background image CSS application in editor

[MAILPOET-2880]

assets/js/src/form_editor/components/form_styling_background.jsx

@@ -32,26 +32,7 @@ const FormStylingBackground = ({ children }) => {
     textAlign = alignment;
   }
 
-  let backgroundSize;
+  let style = {
-  let backgroundPosition;
-  let backgroundRepeat;
-  if (backgroundImageUrl !== undefined) {
-    backgroundPosition = 'center';
-    backgroundRepeat = 'no-repeat';
-    backgroundSize = 'cover';
-  }
-  if (backgroundImageDisplay === 'fit') {
-    backgroundSize = 'auto';
-    backgroundPosition = 'center top';
-  }
-  if (backgroundImageDisplay === 'tile') {
-    backgroundRepeat = 'repeat';
-    backgroundSize = 'auto';
-  }
-  return (
-    <div
-      className="mailpoet-form-background"
-      style={{
     backgroundColor,
     color: fontColor,
     fontSize: font,
@@ -64,12 +45,32 @@ const FormStylingBackground = ({ children }) => {
     padding,
     width: 700,
     margin: '0 auto',
-        backgroundImage: `url(${backgroundImageUrl})`,
+  };
+
+  if (backgroundImageUrl !== undefined) {
+    let backgroundPosition = 'center';
+    let backgroundRepeat = 'no-repeat';
+    let backgroundSize = 'cover';
+
+    if (backgroundImageDisplay === 'fit') {
+      backgroundSize = 'auto';
+      backgroundPosition = 'center top';
+    }
+    if (backgroundImageDisplay === 'tile') {
+      backgroundRepeat = 'repeat';
+      backgroundSize = 'auto';
+    }
+    style = {
+      ...style,
       backgroundRepeat,
       backgroundPosition,
       backgroundSize,
-      }}
+      backgroundImage: `url(${backgroundImageUrl})`,
-    >
+    };
+  }
+
+  return (
+    <div className="mailpoet-form-background" style={style}>
       {children}
     </div>
   );