Ambiance like fullwidth image in pages and posts in genesis


I recently had a client request the ability to add a fullwidth image to specific pages and posts on his site, similar to the Ambiance Pro Theme (affilink) by StudioPress.

He specifically asked that I add this functionality to the Epik Child Theme (affilink) created by Wes Straham.

However, you should be able to add this to any Genesis Child Theme that supports HTML5. If you have any issues, feel free to use the comments for help.

This is how it looks in the Ambiance Theme

Genesis Featured Image as Background

How this works:

When you add an image to the “featured image” widget of a post or page, this code is initiated.

featured image widget

Let’s Get Started

Step One

If your theme folder does not have a folder titled ‘js’ (without quotes), you’ll need to create one.

Step Two

Create 2 new files in the js folder. Be sure to copy the file names listed below exactly. Then open each of the links below, and copy the code into the new files you’ve created in your js folder.

Let me do a little explaining.

backstretch.js is a simple jQuery plugin that allows you to add a dynamically-resized, slideshow-capable background image to any page or element, and this file is the actual plugin. We will NOT be modifying this file.

backstretch-set.js is the file that controls the animation (load time and fading effect) and it is how we assign a class (for styling) to the image. In this case we use the class, “.entry-background”, to control the height, width, and display of the image.

Step Three

You will need to copy and past the code below into your child theme’s functions.php file.

Step Four

Copy and past this code into your child theme’s style.css file.


That’s all! If you encounter any issues be sure to use the comments here and I’ll do what I can to help!

Source Credit: Brian Gardner (StudioPress) & the Ambiance Pro Theme