Fix background image CSS application in editor

[MAILPOET-2880]

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

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