diff --git a/assets/js/src/form_editor/components/form_styling_background.jsx b/assets/js/src/form_editor/components/form_styling_background.jsx index 808d63970c..c7ee1f1e5c 100644 --- a/assets/js/src/form_editor/components/form_styling_background.jsx +++ b/assets/js/src/form_editor/components/form_styling_background.jsx @@ -32,44 +32,45 @@ const FormStylingBackground = ({ children }) => { textAlign = alignment; } - let backgroundSize; - let backgroundPosition; - let backgroundRepeat; + let style = { + backgroundColor, + 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'; - backgroundRepeat = 'no-repeat'; - backgroundSize = 'cover'; - } - if (backgroundImageDisplay === 'fit') { - backgroundSize = 'auto'; - backgroundPosition = 'center top'; - } - if (backgroundImageDisplay === 'tile') { - backgroundRepeat = 'repeat'; - backgroundSize = 'auto'; + 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 ( -
+
{children}
);