Background control and "Choice"

[ThomasFx]

Issue description:

Need to load color only from the background control for some section. It looks that the choice does not work. Other controls like typography works correctly.
It loads all styles such image, repeat etc...

Version used:

WP.org

Using theme_mods or options?

options

Code to reproduce the issue (config + field(s))

Kirki::add_field( 'fp_builder', array(
	'type'		 => 'background',
	'settings'	 => 'bg_image_section_img',
	'label'		 => esc_attr__( 'Background Image', 'textdomain' ),
	'section'	 => 'bg_image_section',
	'transport'	 => 'auto',
	'default'	 => array(
		'background-color'		 => '#0a0a0a',
		'background-image'		 => FPB_SAMPLE_PLUGIN_URL . 'img/bgimg/bgimg.jpg',
		'background-repeat'		 => 'no-repeat',
		'background-position'	 => 'center center',
		'background-size'		 => 'cover',
		'background-attachment'	 => 'scroll',
	),
	'priority'	 => 10,
	'output'	 => array(
		array(
			'element' => '#bg_image_section',
		),
		array(
				'element' => '#fpb-main-navigation .nav a.nav-bg_image_section:after, #fpb-main-navigation .nav a.nav-bg_image_section.active:after',
				'property' => 'background-color',
				'choice'   => 'background-color',
		),
	),
) );

[niklasp]

background-color is only a fallback if background-image does not exist. in your case it seems that background-color is overriden by background-image. Look here for an elaborate solution:
https://css-tricks.com/tinted-images-multiple-backgrounds/

close issue #2026

[DannyCooper]

I think the problem here is that all background fields are shown, either if a default is only added for color:

Kirki::add_field(
	'theme_config_id',
	[
		'type'        => 'background',
		'settings'    => 'background_setting',
		'label'       => esc_html__( 'Background Control', 'kirki' ),
		'description' => esc_html__( 'Background conrols are pretty complex - but extremely useful if properly used.', 'kirki' ),
		'section'     => 'title_tagline',
		'default'     => [
			'background-color' => 'rgba(20,20,20,.8)',
		],
		'transport'   => 'auto',
		'output'      => [
			[
				'element' => 'body',
			],
		],
	]
);

There doesn't seem to be any way to exclude the other controls.

[aristath]

I think the problem here is that all background fields are shown, either if a default is only added for color:

That was on purpose 😄
If all that is required is a color control, then there's no reason to use a background field.

[DannyCooper]

Makes sense!

It's a bit inconsistent with how the Typography Control works which is probably what tripped the author up.