Skip to content

Instantly share code, notes, and snippets.

@joshuadavidnelson
Last active August 9, 2016 20:20
Show Gist options
  • Star 2 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save joshuadavidnelson/7c031ad6247f60974db7 to your computer and use it in GitHub Desktop.
Save joshuadavidnelson/7c031ad6247f60974db7 to your computer and use it in GitHub Desktop.
Add a parallax image behind a page entry header in Genesis - pure css solution. (You'll need to style your image to be tall enough to match the webpage header, so it is behind the main page header on scroll)
<?php
/**
* Add a parallax image behind a page entry header in genesis.
*
* @author Joshua David Nelson, josh@joshuadnelson.com
*/
// Parallax Image
add_action( 'genesis_header', 'parallax_image', 15 );
/**
* Parallax Image
*
* @since 1.0.0
*/
function parallax_image() {
global $post;
if( isset( $post->ID ) && is_page() ) {
$thumb = has_post_thumbnail( $post->ID );
if( $thumb ) {
$thumbnail_src = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), array( 1500, 300 ) );
if( $thumbnail_src )
echo '<div class="parallax_image" style="background-image: url(' . $thumbnail_src . ');"></div>';
}
}
}
// Featured image behind header
add_action( 'genesis_meta', 'jdn_featured_image_header' );
/**
* Display the featured image behind the header.
*
* @since 1.0.0
*/
function jdn_featured_image_header() {
if( is_page() ) {
$thumb = has_post_thumbnail( get_the_ID() );
if( $thumb ) {
remove_action( 'genesis_entry_header', 'genesis_entry_header_markup_open', 5 );
remove_action( 'genesis_entry_header', 'genesis_do_post_title' );
remove_action( 'genesis_entry_header', 'genesis_entry_header_markup_close', 15 );
add_action( 'genesis_after_header', 'genesis_entry_header_markup_open', 15 );
add_action( 'genesis_after_header', 'genesis_do_post_title', 20 );
add_action( 'genesis_after_header', 'genesis_entry_header_markup_close', 25 );
}
}
}
/* Styles needed for parallax effect */
.site-header {
.wrap {
position: relative;
}
}
.parallax_image {
position: fixed;
top: 0;
left: 0;
background-repeat: no-repeat;
min-width: 100%;
width: 100%;
@include background-size( cover );
background-position: center top;
height: 500px;
z-index: -1;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment