How to overlay entry title on featured image in single Posts

In Genesis Facebook group a user asked:

Hello friends, I was able to move my entry-header outside the loop and make it full width, thanks to Sridhar Katakam! However, I’d like to take my featured image outside the loop (preferably above the entry-header).

Here’s what it currently looks like: http://leaguewp.com/web-hosting-service-guide/

Here’s how I’d rather it appear on single post: http://www.nab.com.au/personal/learn/managing-your-debts/pay-less-interest-on-your-home-loan-with-100-percent-offset

I’d appreciate any help. Thanks in advance!

In this tutorial we shall

• add a div.post-hero below header on single Posts and set the featured image as its cover background.
• use a fallback image from the images directory if there’s no featured image set
• display the entry title inside the div and remove it from the entry header

Step 1

Add the following in child theme’s functions.php:

// Register a custom image size for hero images on single Posts
add_image_size( 'post-image', 1600, 400, true );

add_action( 'genesis_after_header', 'sk_hero_image' );
function sk_hero_image() {
// if we are not on a single Post, abort.
if ( !is_singular( 'post' ) ) {
return;
}

// set $image to URL of featured image. If featured image is not present, set it to post-image.jpg in child theme's images directory.
if ( has_post_thumbnail() ) {
$image = genesis_get_image( 'format=url&size=post-image' );
} else {
$image = get_stylesheet_directory_uri() . '/images/post-image.jpg';
} ?>

<div class="post-hero" style="background-image: url('<?php echo $image; ?>')">
<div class="wrap">
<?php genesis_do_post_title(); ?>
</div>
</div>

<?php
// Remove entry title
remove_action( 'genesis_entry_header', 'genesis_do_post_title' );
}

Upload your desired fallback image to child theme’s images directory having the name of post-image.jpg.

Step 2

Regenerate thumbnails.

Step 3

Add the following in child theme’s style.css:

.post-hero {
	padding: 200px 0;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
}

.post-hero .entry-title {
	margin-bottom: 0;
	color: #fff;
	background-color: rgba(0,0,0,.75);
	padding: 15px;
	text-transform: uppercase;
	max-width: 50%;
}

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

	.post-hero .entry-title {
		max-width: none;
	}

}