Display Background Images to Widget Areas (Code for Output.php)

background-image-output.php

add_action( 'wp_enqueue_scripts', 'genesischild_css' );
function genesischild_css() {

wp_enqueue_style( 'genesischild', get_stylesheet_directory_uri() . '/style.css' );
	$handle  = defined( 'CHILD_THEME_NAME' ) && CHILD_THEME_NAME ? sanitize_title_with_dashes( CHILD_THEME_NAME ) : 'child-theme';
	$opts = apply_filters( 'genesischild_images', array( '1', '2', '3', '4' ) );

	$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'] ) : '';
		if( is_front_page() ) {
			$css .= ( ! empty( $section ) && ! empty( $background ) ) ? sprintf( '.featured-background-%s { %s }', $section, $background ) : '';
		}

	}

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

}