Elementor Control Background Image

Default values for the control ‘ Group_Control_Background ‘

I want to show you how you can set default values for the control ‘Group_Control_Background‘ to display a background image.

$this->add_group_control(
Group_Control_Background::get_type(),
		[
			'name' => 'mb_modal_box_bg',
			'types' => ['classic', 'gradient'],
			'fields_options' => [
				'size' => ['default' => 'cover'],
				'position' => ['default' => 'center center'],
				'repeat' => ['default' => 'no-repeat'],
			],
		'selector' => '{{WRAPPER}} .myclass-bg',
		]
);

You have to set the ‘fields_options‘ array of array with ‘key‘ => [‘default‘ => ‘value‘] like any other css properties.
The background image will be affected by the default values and ‘cover’ the container, the focal point is centered and the image is not repeated.

Leave a Comment