Adding a full width featured image behind the title

NB! This is a rewrite of the tutorial making it even easier to use then the original tutorial.

The result should look something like the below.

Full width featured image behind the title

I have looked at how Showcase Pro (I added my affiliate link) a Genesis Child theme has added a full width featured image behind the title and have copied how they did it there to my own custom Altitude Pro Genesis child theme.

This is what I need to do (which has totally changed from what I had earlier)
Duplicate single.php (affects blog posts) from the root folder of Showcase Pro to Altitude Pro.
Or just copy the following code into a new single.php in the root folder of Altitude Pro.

single.php from ShowCase Pro.

<?php
/** 
* Showcase Pro * 
* This file edits the single template in the Showcase Pro Theme. * 
* @package Showcase * @author  Bloom 
* @license GPL-2.0+ * @link    
http://my.studiopress.com/themes/showcase/ 
*/
// Add page header body class to the head
add_filter( 'body_class', 'showcase_single_page_header_body_class' );
function showcase_single_page_header_body_class( $classes ) {
    if( has_post_thumbnail() )        
         $classes[] = 'with-page-header';
    return $classes;
}

// Add page header 
add_action( 'genesis_after_header', 'showcase_single_page_header', 8 );
function showcase_single_page_header() { 
    $output = false;
    $image = get_post_thumbnail_id();
    if( $image ) {
        // Remove the title since we'll add it later        
        remove_action( 'genesis_entry_header', 'genesis_do_post_title' );
        
        $image = wp_get_attachment_image_src( $image, 'showcase_hero' );        
        $background_image_class = 'with-background-image';        
        $title = the_title( '<h1>', '</h1>', false );                
        
        $output .= '<div class="page-header bg-primary with-background-image" 
        style="background-image: url(' . $image[0] . ');"><div class="wrap">';        
        $output .= '<div class="header-content">' . $title . '</div>';        
        $output .= '</div></div>';    
   }

 if( $output ) 
      echo $output;
}

genesis();

NB! If you also want the same affects on pages then duplicate the single.php and rename it to page.php.
single.php = affects only single blog posts.
page.php = affects all pages.

I picked out various CSS that I noticed affected the page-header, title and background title image.
The following is from ShowCase Pro style.css that I added to the bottom of the style.css of Altitude Pro.

/* From Showcase pro theme */

/* Background Images and Colors
 * ========================================================================== */

.with-background-image {
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.with-background-image:after {
	-ms-filter: "alpha(Opacity=30)";
	filter: alpha(opacity=30);
	opacity: 0.30;
}

.bg-primary,
.bg-primary a {
	color: #fff;
}

[class*="bg-"],
[class*="bg-"] .wrap {
	position: relative;
	z-index: 2;
}

.bg-primary:after,
.bg-light-gray:after {
	content: " ";
	display: block;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 0;
}

.bg-primary:after {
	background: #1a1a1a;
}

.bg-light-gray:after {
	background: #dcdcdc;
}




/* Page Header
 * ========================================================================== */

.page-header {
	padding: 8rem 0;
	position: relative;
	text-align: center;
	color: #fff;
	background-color: #1a1a1a;
}

.page-header h1,
.page-header .author-box-title {
	line-height: 1.2;
	font-size: 40px;
	display: inline-block;
}

.page-header h1:last-child {
	margin-bottom: 0;
}

.page-header p {
	font-size: 2.4rem;
	max-width: 74rem;
	margin-left: auto;
	margin-right: auto;
}

.page-header p:last-child {
	margin-bottom: 0;
}

.page-header a:not(.button) {
	opacity: .5;
}

.page-header a:hover:not(.button) {
	opacity: 1;
}



@media only screen and (min-width: 800px) {

	.page-header {
		padding: calc(7% + 10.8rem) 0 7%;
	}

	.home .page-header {
		padding: calc(10% + 10.8rem) 0 10%;
	}

	.page-header h1,
	.page-header .author-box-title {
		font-size: 6rem;
	}

	.page-header .entry-meta {
		font-size: 1.6ren;
	}
	
	/* Added */
	.page-header h1, .page-header .author-box-title {
	    font-size: 6rem;
	    text-align: center;
	}

}

Let me know how it works for you.