Set Background Image of Widget Area in Customizer

add-customizer-option.php

<?php

add_action( 'customize_register', 'genesischild_register_theme_customizer' );
/*
 * Register Our Customizer Stuff Here
 */
function genesischild_register_theme_customizer( $wp_customize ) {

	// Create custom panel.
	$wp_customize->add_panel( 'featured_images', array(
		'priority'       => 70,
		'theme_supports' => '',
		'title'          => __( 'Featured Images', 'genesischild' ),
		'description'    => __( 'Set background images for certain widgets.', 'genesischild' ),
	) );

	// Add Featured Image for Hero Widget
	// Add section.
	$wp_customize->add_section( 'hero_background' , array(
		'title'      => __( 'Hero Background','genesischild' ),
		'panel'      => 'featured_images',
		'priority'   => 20,
	) );

	// Add setting.
	$wp_customize->add_setting( 'hero_bg', array(
		'default'     => get_stylesheet_directory_uri() . '/images/hero-bg.jpg',
	) );

	// Add control.
	$wp_customize->add_control( new WP_Customize_Image_Control(
		$wp_customize, 'hero_background_image', array(
			  'label'      => __( 'Add Hero Background Here, the width should be approx 1400px', 'genesischild' ),
			  'section'    => 'hero_background',
			  'settings'   => 'hero_bg',
			  )
	) );
}

output-css.php

<?php

add_action( 'wp_enqueue_scripts', 'genesischild_css' );
/**
 * Output CSS for background image
 */
function genesischild_css() {
	wp_enqueue_style( 'genesischild', get_stylesheet_directory_uri() . '/style.css' );

	$handle = 'genesischild';  // Swap in your CSS Stylesheet ID

	$css = '';

	$hero_bg_image = get_theme_mod( 'hero_bg' ); // Assigning it to a variable to keep the markup clean.

	$css .= ( !empty($hero_bg_image) ) ? sprintf('
	.herocontainer {
		background: url(%s) no-repeat center;
		background-size: cover;
	}
	', $hero_bg_image ) : '';

	if ( $css ) {
		wp_add_inline_style( $handle  , $css );
	}
}

widget-register.php

<?php

add_action( 'widgets_init', 'genesischild_extra_widgets' );
/**
 * Register new Widget area and position it after the header.
 */
function genesischild_extra_widgets() {
	
	genesis_register_sidebar( array(
		'id'            => 'hero',
		'name'          => __( 'Hero Home Page', 'genesischild' ),
		'description'   => __( 'This is the Hero Home Page area', 'genesischild' ),
	) );
}
	
add_action( 'genesis_after_header','genesischild_hero_widget' );
/**
 * Position the Hero Area.
 */
function genesischild_hero_widget() {
	genesis_widget_area( 'hero', array(
		'before' => '<section class="herocontainer"><div class="wrap hero">',
		'after'  => '</div></section>',
	));
}