Adding a full width featured image behind the title

The result should look something like the below.
(I am still experimenting with the code.)

Full width featured image behind the title

I have looked at how Showcase Pro 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:
1. Copy page-header.php.
2. Add code to the functions.php file.
3. Add CSS to the style.css.

The page-header.php

I have copied the file lib/page-header.php from the ShowCase Pro theme. It uses this code:
(I have commented out some of the code and also removed some code. Experiment with what can be removed and not.)

<?php

//* Add opening markup for the Page Header
$header_color = get_option( 'showcase_header_color', 'true' );
if ( $header_color === 'white' ) {
 add_action( 'genesis_after_header', 'showcase_opening_page_header', 8 );
} else {
 add_action( 'genesis_before_header', 'showcase_opening_page_header' );
}

function showcase_opening_page_header() {
 if ( ( is_front_page() && is_active_sidebar( '' ) ) || ( is_page() && !is_page_template( 'page_landing.php' ) ) || is_single() || is_archive() || is_home() ) {

 /*if ( is_front_page() && is_active_sidebar( 'front-page-hero' ) ) {
 $hero_image = get_option( 'showcase-hero-image', sprintf( '%s/images/hero-image-1.jpg', get_stylesheet_directory_uri() ) );
 $background_image = 'style="background-image: url(' . $hero_image . ')"';
 }*/

 if ( ( is_page() || is_single() || ( is_home() && get_option('page_for_posts') ) ) && has_post_thumbnail() ) {
 if ( is_home() && get_option('page_for_posts') ) {
 $posts_page_id = get_option('page_for_posts');
 $image = wp_get_attachment_image_src( get_post_thumbnail_id( $posts_page_id ), 'full' );
 } else {
 $image = wp_get_attachment_image_src( get_post_thumbnail_id(), 'full' );
 }
 $background_image = 'style="background-image: url(' . $image[0] . ')"';
 }

 if ( $background_image ) {
 $background_image_class = 'with-background-image';
 }

 ?>

 <div class="header-wrap bg-primary <?php echo $background_image_class; ?>" <?php echo $background_image; ?>>

 <?php
 }
}

//* Add closing markup for the Page Header
add_action( 'genesis_after_header', 'showcase_closing_page_header' );
function showcase_closing_page_header() {

 if ( ( is_front_page() && is_active_sidebar( 'front-page-hero' ) ) || ( is_page() && !is_page_template( 'page_landing.php' ) ) || is_single() || is_archive() || is_home() ) {

 ?>
 <div class="page-header">
 <div class="wrap">
 <?php

 if ( is_front_page() && is_active_sidebar( 'front-page-hero' ) ) {

 /* genesis_widget_area( 'front-page-hero', array(
 'before' => '<div id="front-page-hero" class="front-page-hero widget-area">',
 'after' => '</div>',
 ) ); */

 } elseif ( is_archive() ) {

 if ( is_category() || is_tag() || is_tax() ) {

 //* Remove the description
 remove_action( 'genesis_before_loop', 'genesis_do_taxonomy_title_description', 15 );

 echo single_term_title( '<h1>', '</h1>', true );
 /**
 * This is a weird hack to fix the non-closing h1 above, for some reason
 * it's including the paragraph below, so I'm echoing a closing h1 tag.
 */
 echo '</h1>';
 echo term_description();

 } elseif ( is_author() ) {

 echo genesis_author_box();

 }

 } elseif( is_home() && get_option('page_for_posts') ) {

 $posts_page_id = get_option('page_for_posts');
 echo '<h1>' . get_the_title($posts_page_id) . '</h1>';
 remove_action( 'genesis_before_loop', 'genesis_do_posts_page_heading' );

 } else {

 if ( is_singular() && !is_page_template( 'page_blog.php' ) ) {

 /*if ( !is_singular( 'team' ) ) {
 genesis_post_info();
 }*/

 //* Remove the entry title (requires HTML5 theme support)
 remove_action( 'genesis_entry_header', 'genesis_do_post_title' );

 }

 echo showcase_bar_to_br( the_title( '<h1>', '</h1>', false ) );
 }

 ?>
 </div>
 <?php genesis_do_subnav(); ?>
 </div>
 </div>

 <?php
 }
}

Adding the code to the functions.php file

/*--------- Code from Showcase Pro - for adding a full width featured image below the title -----------*/

//* Page Header
 include_once( get_stylesheet_directory() . '/lib/page-header.php' );

//* Add screen reader class to archive description
add_filter( 'genesis_attr_author-archive-description', 'genesis_attributes_screen_reader_class' );

//* Add viewport meta tag for mobile browsers
// add_theme_support( 'genesis-responsive-viewport' );


/* ==========================================================================
 * Helper Functions
 * ========================================================================== */

/**
 * Bar to Line Break
 *
 */
function showcase_bar_to_br( $content ) {
 return str_replace( ' | ', '<br class="mobile-hide">', $content );
}

Add the following code to your style.css.
(I have commented out a lot of code I do not think that I need, but I left it there for now if I discover I need it anyhow.)

/* White Header
 * ==========================================================================

.white-header .site-header {
 background: #fff;
}

.white-header .site-header a {
 color: #333;
}

@media only screen and (max-width: 800px) {
 .white-header .menu-toggle:before,
 .white-header .sub-menu-toggle:before {
 color: #333;
 }
}

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

.white-header .genesis-nav-menu .menu-item.highlight a {
 border: 1px solid #333;
 color: #333;
 }

.white-header .genesis-nav-menu .menu-item.highlight a:hover,
 .white-header .genesis-nav-menu .menu-item.highlight.current-menu-item a {
 }
}

/* Entry Navigation

.pagination {
 margin-top: 40px;
 text-align: center;
}

.pagination ul {
 display: inline-block;
 overflow: hidden;
}

.pagination li {
 border-radius: 3px;
 margin: 2px;
 list-style-type: none;
 display: block;
 float: left;
 overflow: hidden;
}

.pagination .pagination-omission {
 border: 0;
}

.pagination li a {
 display: block;
 padding: 8px 16px;
 text-decoration: none;
}

.pagination li a:hover,
.pagination li.active a {
 background: rgba(0,178,238, .6);
 color: #fff;
 border-bottom: 0;
}

/* 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=90)";
 filter: alpha(opacity=90);
 opacity: 0.90;
}

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

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

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

.bg-primary:after {
 /*background: #52c0cb; */
 background: rgba(199, 210, 254, 0.2); 
}

/*
.bg-secondary:after {
 background: #e6413e;
}

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

.bg-dark-gray:after {
 background: #333333;
}

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

.page-header {
 padding: 8% 0;
 position: relative;
 text-align: center;
 color: #ccc;
 
 /* ADDED */
 box-shadow: 0px 2px 2px #444;
 /* Color page header image
 background: rgba(0, 0, 254, 0.4); */ 
}

.home .page-header,
.home .bg-primary,
.page-template-template_inner-page .page-header,
.page-template-template_inner-page .bg-primary{
 padding: 0;
 margin: 0;
 height: 0;
}

.front-page .site-container .site-inner, .inner-page .site-container .site-inner {
 max-width: 100%;
}

/* Added */
.site-inner {
 margin-top: 5px !important;
 max-width: 2000px !important;
}

/* Added */
.breadcrumb {
 margin-top: -5px;
 color: #0000bc;
}

.page-header h1,
.page-header .author-box-title {
 line-height: 1.2;
 font-size: 60px;
 margin-bottom: 0.25em;
 display: inline-block;
 
 /* Added */
 text-shadow: 0 1px 3px #000;
}

.page-header p {
 font-size: 24px;
 max-width: 740px;
 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;
}

.page-header .entry-meta {
 font-size: 14px;
}

@media only screen and (max-width: 870px) {

.page-header {
 padding: 11% 0;
 }

.page-header h1,
 .page-header .author-box-title {
 font-size: 40px;
 }

.page-header .entry-meta {
 font-size: 16px;
 }

}

@media only screen and (max-width: 799px) {

.page-header {
 padding: 15% 0;
 }

.page-header h1,
 .page-header .author-box-title {
 font-size: 42px;
 }

.page-header .entry-meta {
 font-size: 16px;
 }

}

You will need to experiment with media queries to see what works and not in your own theme.

Resources:
http://my.studiopress.com/themes/showcase/
https://sridharkatakam.com/featured-image-background-parallax-section-on-posts-and-pages-in-altitude-pro/