Fullwidth featured image behind the title (with template)

For Pages (static) create a new page and paste below code, and select “Fullwidth Featured Image” at Template options.

<?php
/**
 * Genesis Framework.
 *
  * Template Name: Fullwidth Featured Image
   
 * WARNING: This file is part of the core Genesis Framework. DO NOT edit this file under any circumstances.
 * Please do all modifications in the form of a child theme.
 *
 * @package Genesis\Templates
 * @author  StudioPress
 * @license GPL-2.0+
 * @link    https://my.studiopress.com/themes/genesis/
 */
 
// This file handles pages, but only exists for the sake of child theme forward compatibility.
 
// 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();

To enable at Blog post, create a new page called single.php and paste below code

<?php
/**
 * Genesis Framework.
 *
 * WARNING: This file is part of the core Genesis Framework. DO NOT edit this file under any circumstances.
 * Please do all modifications in the form of a child theme.
 *
 * @package Genesis\Templates
 * @author  StudioPress
 * @license GPL-2.0+
 * @link    https://my.studiopress.com/themes/genesis/
 */
 
// This file handles single entries, but only exists for the sake of child theme forward compatibility.
 
// 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();

Add below css line at style.css file

/* 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: 4rem;
    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: 960px) {
.page-header { 
  padding: calc(2% + 10.8rem) 0 10%;
} 
.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; 
 } 
}

In your style.css file replace below line at media query 960px

.site-header {
    position: fixed;
    width: 100%;
    z-index: 9999;
}

with

.site-header {
    position: relative;
    width: 100%;
    z-index: 9999;
}

Source: https://siam.naulak.com/fullwidth-featured-image-behind-the-title-in-genesis/

Scroll to Top