customize.php

<?php
/*
 * Add Background Images Via the Customizer
 */

add_action( 'customize_register', 'genesischild_customizer_register' );
/**
 * Register settings and controls with the Customizer.
 *
 * @since 1.0.0
 *
 * @param WP_Customize_Manager $wp_customize Customizer object.
 */
function genesischild_customizer_register() {

	/**
	 * Customize Background Image Control Class
	 *
	 * @package WordPress
	 * @subpackage Customize
	 * @since 3.4.0
	 */
	class Child_Genesischild_Image_Control extends WP_Customize_Image_Control {

		/**
		 * Constructor.
		 *
		 * If $args['settings'] is not defined, use the $id as the setting ID.
		 *
		 * @since 3.4.0
		 * @uses WP_Customize_Upload_Control::__construct()
		 *
		 * @param WP_Customize_Manager $manager
		 * @param string $id
		 * @param array $args
		 */
		public function __construct( $manager, $id, $args ) {
			$this->statuses = array( '' => __( 'No Image', 'genesischild' ) );

			parent::__construct( $manager, $id, $args );

			$this->add_tab( 'upload-new', __( 'Upload New', 'genesischild' ), array( $this, 'tab_upload_new' ) );
			$this->add_tab( 'uploaded',   __( 'Uploaded', 'genesischild' ),   array( $this, 'tab_uploaded' ) );

			if ( $this->setting->default )
				$this->add_tab( 'default',  __( 'Default', 'genesischild' ),  array( $this, 'tab_default_background' ) );

			// Early priority to occur before $this->manager->prepare_controls();
			add_action( 'customize_controls_init', array( $this, 'prepare_control' ), 5 );
		}

		/**
		 * @since 3.4.0
		 * @uses WP_Customize_Image_Control::print_tab_image()
		 */
		public function tab_default_background() {
			$this->print_tab_image( $this->setting->default );
		}

	}

	global $wp_customize;
        // Add in the correct amount of images into the array
	$images = apply_filters( 'genesischild_images', array( '1', '2') );

	$wp_customize->add_section( 'genesischild-settings', array(
		'description' => __( 'Use the included default images or personalize your site by uploading your own images.<br /><br />The default images are <strong>1600 pixels wide and 1050 pixels tall</strong>.', 'genesischild' ),
		'title'    => __( 'Featured Background Images', 'genesischild' ),
		'priority' => 35,
	) );

	foreach( $images as $image ){

		$wp_customize->add_setting( $image .'-genesischild-image', array(
			'default'  => sprintf( '%s/images/bg-%s.jpg', get_stylesheet_directory_uri(), $image ),
			'type'     => 'option',
		) );

		$wp_customize->add_control( new Child_Genesischild_Image_Control( $wp_customize, $image .'-genesischild-image', array(
			'label'    => sprintf( __( 'Featured Background %s Image:', 'genesischild' ), $image ),
			'section'  => 'genesischild-settings',
			'settings' => $image .'-genesischild-image',
			'priority' => $image+1,
		) ) );

	}

}

functions.php

<?php

// Add Image upload and Color select to WordPress Theme Customizer.
require( get_stylesheet_directory() . '/lib/customize.php' );
// Include Customizer CSS.
require( get_stylesheet_directory() . '/lib/output.php' );

output.php

<?php
/*
 * Adds the required CSS to the front end.
 */

add_action( 'wp_enqueue_scripts', 'genesischild_css' );
/**
* Checks the settings for the images and background colors for each image
* If any of these value are set the appropriate CSS is output
*
* @since 1.0
*/
function genesischild_css() {

wp_enqueue_style( 'genesischild', get_stylesheet_directory_uri() . '/style.css' );
	//If your theme does not have it's name defined, don't use the $handle variable just use the actual id of the themes CSS, such as in this example 'genesischild' add it further below - wp_add_inline_style( $handle, $css );
	$handle  = defined( 'CHILD_THEME_NAME' ) && CHILD_THEME_NAME ? sanitize_title_with_dashes( CHILD_THEME_NAME ) : 'child-theme';
        // Add in the correct amount of images into the array
	$opts = apply_filters( 'genesischild_images', array( '1', '2' ) );

	$settings = array();

	foreach( $opts as $opt ){
		$settings[$opt]['image'] = preg_replace( '/^https?:/', '', get_option( $opt .'-genesischild-image', sprintf( '%s/images/bg-%s.jpg', get_stylesheet_directory_uri(), $opt ) ) );
	}

	$css = '';

	foreach ( $settings as $section => $value ) {

		$background = $value['image'] ? sprintf( 'background-image: url(%s);', $value['image'] ) : '';
                // Remove the conditional surrounding the code below if the images are appearing on pages other than the front page
		if( is_front_page() ) {
			$css .= ( ! empty( $section ) && ! empty( $background ) ) ? sprintf( '.featured-background-%s { %s }', $section, $background ) : '';
		}

	}



	if ( $css ){
		wp_add_inline_style( $handle, $css ); //so here instead of $handle use your themes CSS ID - which in this case is genesischild
	}

}

style.css

.featured-background-1,
.featured-background-2 {
	background-color: #fff;
	background-position: 50% 0;
	background-repeat: no-repeat;
	-webkit-background-size: cover;
	-moz-background-size:    cover;
	background-size:         cover;
}

widget-register.php

<?php

/**
 * Register and unregister and position all the widgets.
 *
 * @package genesischild
 */

add_action( 'widgets_init', 'genesischild_extra_widgets' );
/**
 * Register new Widget areas and position them.
 */
function genesischild_extra_widgets() {
	
	genesis_register_sidebar( array(
		'id'            => 'featured-background-1',
		'name'          => __( 'Hero Home Page', 'genesischild' ),
		'description'   => __( 'This is the Hero Home Page area', 'genesischild' ),
	) );
	genesis_register_sidebar( array(
		'id'            => 'featured-background-2',
		'name'          => __( 'Optin', 'genesischild' ),
		'description'   => __( 'This is the optin area', 'genesischild' ),
	) );
}
	

add_action( 'genesis_after_header','genesischild_hero_widget' );
/**
 * Position the Hero Area.
 */
function genesischild_hero_widget() {
	genesis_widget_area( 'featured-background-1', array(
		'before' => '<section class="featured-background-1 herocontainer"><div class="wrap hero">',
		'after'  => '</div></section>',
	));
}

add_action( 'genesis_after_header','genesischild_optin_widget' );
/**
 * Position the Optin Area.
 */
function genesischild_optin_widget() {
	genesis_widget_area( 'featured-background-2', array(
		'before' => '<aside class="featured-background-2 optincontainer"><div class="wrap optin">',
		'after'  => '</div></aside>',
	));
}