Background image

Imports / depencies

const { InspectorControls, MediaUpload, MediaUploadCheck } = wp.editor;
const { PanelBody } = wp.components;

Editor data

<InspectorControls>
	<PanelBody
		title="Background"
		initialOpen={ true }
	>
		<img className="element-background-image" src={ backgroundImage } alt=""></img>
		<MediaUploadCheck>
			<MediaUpload
				label={ __( 'Background image' ) }
				onSelect={ ( media ) => setAttributes( { backgroundImage: media.sizes.full.url } ) }
				allowedTypes={ [ 'image' ] }
				value={ backgroundImage }
				render={ ( { open } ) => (
					<button className="components-button components-color-palette__clear is-button is-default is-small" onClick={ open }>
					Choose image
					</button>
				) }
			/>
		</MediaUploadCheck>
	</PanelBody>
</InspectorControls>

Save data

<section
    className={ classHelper.joinContainerClasses( true, className ) }
    style={ backgroundImage: `url(${ backgroundImage })`}
>

const getBackground = ( bg ) => {
    if ( bg ) {
        return (
            {
                backgroundImage: `url(${ bg })`,
            }
        );
    }
};