Featured Image as div background (single.php)

[sid]

Hi,

I'm building a design which uses the featured image as a background for a div. And then the blog post title and date are shown inside the div (on top of the featured image).

I was able to code this directly into home.php for the blog page.. But I couldn't make it work in single.php.

After doing research I found the following code (for functions.php) which adds the featured image at the top of a blog post... But I am not sure how use the featured image as a background and insert the blog title + date.

add_action( 'genesis_entry_header', 'single_post_featured_image', 5 );

function single_post_featured_image() {
	
	if ( ! is_singular( 'post' ) )
		return;
	
	$img = genesis_get_image( array( 'format' => 'html', 'size' => genesis_get_option( 'image_size' ), 'attr' => array( 'class' => 'post-image' ) ) );
	printf( '<a href="%s" title="%s">%s</a>', get_permalink(), the_title_attribute( 'echo=0' ), $img );
	
}

The finished code structure that display at the top of each blog post should be like this.. Any idea how to get this into single.php? Or does it need to be done via functions.php??

<?php
$src = wp_get_attachment_image_src(  get_post_thumbnail_id( $post->ID ), 'single-post-thumbnail' );
?>

<div class="featured-image" style="background: url('<?php 
	if ( has_post_thumbnail() ) { // check if the post has a Post Thumbnail assigned to it.
		echo esc_url( $src[0] );
	} 
	else echo "";
?>')">

	<header class="entry-header">
		<a href="<?php the_permalink(); ?>">
			<p><?php the_date('F j, Y'); ?></p>
			<h1 class="entry-title" itemprop="headline">
				<?php the_title(); ?>
			</h1>
		</a>
	</header>

</div>

[Brad Dalton]

Link to the source of the code please.

---

Tutorials for StudioPress Themes & WooCommerce.

[Author]

Posts