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/