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; }