use Elementor\Core\Breakpoints\Manager as Breakpoints_Manager;
use Elementor\Modules\DynamicTags\Module as TagsModule;
if ( ! defined( 'ABSPATH' ) ) {
exit; // Exit if accessed directly.
* Elementor background control.
* A base control for creating background control. Displays input fields to define
* the background color, background image, background gradient or background video.
class Group_Control_Background extends Group_Control_Base {
* Holds all the background control fields.
* @var array Background control fields.
protected static $fields;
* Holds all the available background types.
private static $background_types;
* Get background control type.
* Retrieve the control type, in this case `background`.
* @return string Control type.
public static function get_type() {
* Get background control types.
* Retrieve available background types.
* @return array Available background types.
public static function get_background_types() {
if ( null === self::$background_types ) {
self::$background_types = self::get_default_background_types();
return self::$background_types;
* Get Default background types.
* Retrieve background control initial types.
* @return array Default background types.
private static function get_default_background_types() {
'title' => esc_html__( 'Classic', 'elementor' ),
'icon' => 'eicon-paint-brush',
'title' => esc_html__( 'Gradient', 'elementor' ),
'icon' => 'eicon-barcode',
'title' => esc_html__( 'Video', 'elementor' ),
'icon' => 'eicon-video-camera',
'title' => esc_html__( 'Slideshow', 'elementor' ),
'icon' => 'eicon-slideshow',
* Initialize background control fields.
* @return array Control fields.
public function init_fields() {
$active_breakpoints = Plugin::$instance->breakpoints->get_active_breakpoints();
$location_device_args = [];
$location_device_defaults = [
$angel_device_defaults = [
$position_device_args = [];
$position_device_defaults = [
'default' => 'center center',
foreach ( $active_breakpoints as $breakpoint_name => $breakpoint ) {
$location_device_args[ $breakpoint_name ] = $location_device_defaults;
$angel_device_args[ $breakpoint_name ] = $angel_device_defaults;
$position_device_args[ $breakpoint_name ] = $position_device_defaults;
$fields['background'] = [
'label' => esc_html__( 'Background Type', 'elementor' ),
'type' => Controls_Manager::CHOOSE,
$fields['gradient_notice'] = [
'type' => Controls_Manager::ALERT,
'alert_type' => 'warning',
'content' => esc_html__( 'Set locations and angle for each breakpoint to ensure the gradient adapts to different screen sizes.', 'elementor' ),
'background' => [ 'gradient' ],
'label' => esc_html__( 'Color', 'elementor' ),
'type' => Controls_Manager::COLOR,
'control_type' => 'content',
'title' => esc_html__( 'Background Color', 'elementor' ),
'{{SELECTOR}}' => 'background-color: {{VALUE}};',
'background' => [ 'classic', 'gradient', 'video' ],
$fields['color_stop'] = [
'label' => esc_html_x( 'Location', 'Background Control', 'elementor' ),
'type' => Controls_Manager::SLIDER,
'size_units' => [ '%', 'custom' ],
'device_args' => $location_device_args,
'background' => [ 'gradient' ],
'label' => esc_html__( 'Second Color', 'elementor' ),
'type' => Controls_Manager::COLOR,
'control_type' => 'content',
'background' => [ 'gradient' ],
$fields['color_b_stop'] = [
'label' => esc_html_x( 'Location', 'Background Control', 'elementor' ),
'type' => Controls_Manager::SLIDER,
'size_units' => [ '%', 'custom' ],
'device_args' => $location_device_args,
'background' => [ 'gradient' ],
$fields['gradient_type'] = [
'label' => esc_html_x( 'Type', 'Background Control', 'elementor' ),
'type' => Controls_Manager::SELECT,
'linear' => esc_html__( 'Linear', 'elementor' ),
'radial' => esc_html__( 'Radial', 'elementor' ),
'background' => [ 'gradient' ],
$fields['gradient_angle'] = [
'label' => esc_html__( 'Angle', 'elementor' ),
'type' => Controls_Manager::SLIDER,
'size_units' => [ 'deg', 'grad', 'rad', 'turn', 'custom' ],
'device_args' => $angel_device_args,
'{{SELECTOR}}' => 'background-color: transparent; background-image: linear-gradient({{SIZE}}{{UNIT}}, {{color.VALUE}} {{color_stop.SIZE}}{{color_stop.UNIT}}, {{color_b.VALUE}} {{color_b_stop.SIZE}}{{color_b_stop.UNIT}})',
'background' => [ 'gradient' ],
'gradient_type' => 'linear',
$fields['gradient_position'] = [
'label' => esc_html__( 'Position', 'elementor' ),
'type' => Controls_Manager::SELECT,
'center center' => esc_html__( 'Center Center', 'elementor' ),
'center left' => esc_html__( 'Center Left', 'elementor' ),
'center right' => esc_html__( 'Center Right', 'elementor' ),
'top center' => esc_html__( 'Top Center', 'elementor' ),
'top left' => esc_html__( 'Top Left', 'elementor' ),
'top right' => esc_html__( 'Top Right', 'elementor' ),
'bottom center' => esc_html__( 'Bottom Center', 'elementor' ),
'bottom left' => esc_html__( 'Bottom Left', 'elementor' ),
'bottom right' => esc_html__( 'Bottom Right', 'elementor' ),
'default' => 'center center',
'device_args' => $position_device_args,
'{{SELECTOR}}' => 'background-color: transparent; background-image: radial-gradient(at {{VALUE}}, {{color.VALUE}} {{color_stop.SIZE}}{{color_stop.UNIT}}, {{color_b.VALUE}} {{color_b_stop.SIZE}}{{color_b_stop.UNIT}})',
'background' => [ 'gradient' ],
'gradient_type' => 'radial',
'label' => esc_html__( 'Image', 'elementor' ),
'type' => Controls_Manager::MEDIA,
'category' => 'background',
'title' => esc_html__( 'Background Image', 'elementor' ),
'{{SELECTOR}}' => 'background-image: url("{{URL}}");',
'render_type' => 'template',
'background' => [ 'classic' ],
'label' => esc_html__( 'Position', 'elementor' ),
'type' => Controls_Manager::SELECT,
'' => esc_html__( 'Default', 'elementor' ),
'center center' => esc_html__( 'Center Center', 'elementor' ),
'center left' => esc_html__( 'Center Left', 'elementor' ),
'center right' => esc_html__( 'Center Right', 'elementor' ),
'top center' => esc_html__( 'Top Center', 'elementor' ),
'top left' => esc_html__( 'Top Left', 'elementor' ),
'top right' => esc_html__( 'Top Right', 'elementor' ),
'bottom center' => esc_html__( 'Bottom Center', 'elementor' ),
'bottom left' => esc_html__( 'Bottom Left', 'elementor' ),
'bottom right' => esc_html__( 'Bottom Right', 'elementor' ),
'initial' => esc_html__( 'Custom', 'elementor' ),
'{{SELECTOR}}' => 'background-position: {{VALUE}};',
'background' => [ 'classic' ],
'label' => esc_html__( 'X Position', 'elementor' ),
'type' => Controls_Manager::SLIDER,
'size_units' => [ 'px', '%', 'em', 'rem', 'vw', 'custom' ],
'{{SELECTOR}}' => 'background-position: {{SIZE}}{{UNIT}} {{ypos.SIZE}}{{ypos.UNIT}}',
'background' => [ 'classic' ],
'position' => [ 'initial' ],
'label' => esc_html__( 'Y Position', 'elementor' ),
'type' => Controls_Manager::SLIDER,
'size_units' => [ 'px', '%', 'em', 'rem', 'vh', 'custom' ],
'{{SELECTOR}}' => 'background-position: {{xpos.SIZE}}{{xpos.UNIT}} {{SIZE}}{{UNIT}}',
'background' => [ 'classic' ],
'position' => [ 'initial' ],
$fields['attachment'] = [
'label' => esc_html_x( 'Attachment', 'Background Control', 'elementor' ),
'type' => Controls_Manager::SELECT,
'' => esc_html__( 'Default', 'elementor' ),
'scroll' => esc_html_x( 'Scroll', 'Background Control', 'elementor' ),
'fixed' => esc_html_x( 'Fixed', 'Background Control', 'elementor' ),
'(desktop+){{SELECTOR}}' => 'background-attachment: {{VALUE}};',
'background' => [ 'classic' ],
$fields['attachment_alert'] = [
'type' => Controls_Manager::RAW_HTML,
'content_classes' => 'elementor-control-field-description',
'raw' => esc_html__( 'Note: Attachment Fixed works only on desktop.', 'elementor' ),
'background' => [ 'classic' ],
'label' => esc_html_x( 'Repeat', 'Background Control', 'elementor' ),
'type' => Controls_Manager::SELECT,
'' => esc_html__( 'Default', 'elementor' ),
'no-repeat' => esc_html__( 'No-repeat', 'elementor' ),
'repeat' => esc_html__( 'Repeat', 'elementor' ),
'repeat-x' => esc_html__( 'Repeat-x', 'elementor' ),
'repeat-y' => esc_html__( 'Repeat-y', 'elementor' ),
'{{SELECTOR}}' => 'background-repeat: {{VALUE}};',
'background' => [ 'classic' ],
'label' => esc_html__( 'Display Size', 'elementor' ),
'type' => Controls_Manager::SELECT,
'' => esc_html__( 'Default', 'elementor' ),
'auto' => esc_html__( 'Auto', 'elementor' ),
'cover' => esc_html__( 'Cover', 'elementor' ),
'contain' => esc_html__( 'Contain', 'elementor' ),
'initial' => esc_html__( 'Custom', 'elementor' ),
'{{SELECTOR}}' => 'background-size: {{VALUE}};',
'background' => [ 'classic' ],
'label' => esc_html__( 'Width', 'elementor' ),
'type' => Controls_Manager::SLIDER,