Backstretch Image to CSS Background Image in Agent Focused Theme

The Agent Focused Genesis child theme uses Backstretch, a jQuery script, to add the large image on the theme front page. A frequently asked question is how to get more control over the position of the background image. It’s fairly easy to convert the theme to use a CSS background image, which makes positioning more straightforward.

The steps in this tutorial to add a CSS background image can generally be applied to other themes that have a backstretch image, although a few changes may be needed.

The Steps to Take

• First, we’ll comment out the sections that add the backstretch script.
• Next we’ll add a new function to add the body background-image style, both in front-page.php.
• And then we’ll add the positioning styles to style-front.css.

All the code changes are in this GitHub Gist.

(The Agent Focused theme is a theme for realtors, but can also been used for other purposes, from StudioPress and Winning Agent.)

Step 1. Comment Out the Backstretch Section in front-page.php

At the top of front-page.php is this section – Enqueue scripts for background image. Add /* and */, so it looks like the following:

<!--?php // Do not add this line when you copy and paste code.

// Enqueue scripts for background image.
add_action( 'wp_enqueue_scripts', 'agentfocused_front_page_enqueue_scripts' );
function agentfocused_front_page_enqueue_scripts() {

	wp_enqueue_style( 'agentfocused-front-page-styles', get_stylesheet_directory_uri() . 'https://g3f2z8v4.rocketcdn.me/style-front.css', array(), CHILD_THEME_VERSION );

/*
	$image = get_option( 'agentfocused-front-image', sprintf( '%s/images/front-page-image.jpg', get_stylesheet_directory_uri() ) );

	// Load scripts only if custom background is being used.
	if ( ! empty( $image ) && is_active_sidebar( 'front-page-1' ) ) {

		// Enqueue Backstretch scripts.
		wp_enqueue_script( 'agentfocused-backstretch', get_stylesheet_directory_uri() . 'https://g3f2z8v4.rocketcdn.me/js/backstretch.js', array( 'jquery' ), '1.0.0' );

		wp_enqueue_script( 'agentfocused-backstretch-set', get_stylesheet_directory_uri() . 'https://g3f2z8v4.rocketcdn.me/js/backstretch-set.js' , array( 'jquery', 'agentfocused-backstretch' ), '1.0.0' );

		wp_localize_script( 'agentfocused-backstretch-set', 'BackStretchImg', array( 'src' =--> str_replace( 'http:', '', $image ) ) );

	}
*/

	// Enqueue Modernizr for object-fit.
	wp_enqueue_script( 'agentfocused-modernizr-object-fit', get_stylesheet_directory_uri() . 'https://g3f2z8v4.rocketcdn.me/js/modernizr-custom.js', array( 'jquery' ), '1.0.0' );
}

Step 2. Add a New Section

<!--?php // Do not add this line when you copy and paste code.

// Add background image style to WP head.
add_action( 'wp_head', 'agentfocused_background_styles', 99 );
function agentfocused_background_styles() {

	$image = get_option( 'agentfocused-front-image', sprintf( '%s/images/front-page-image.jpg', get_stylesheet_directory_uri() ) );

	// Add style only if background image is being used.
	if ( ! empty( $image ) && is_active_sidebar( 'front-page-1' ) ) {

		echo '<style type="text/css" media="screen"-->
			body.front-page {
				background-image: url(' . esc_html( $image ) . ');
			}
		';

	}
}

Next in front-page.php, we’re going to add a new section that adds your image from the WP customizer as a background image to the front page. Add this code just below the section above.

So now let’s review what this code does.

• add_action( ... ) – This writes our background image CSS to the WP head.
• $image = get_option( ... ) – This comes from the file /agent-focused/lib/customize.php, lines 52 to 55, which adds the image used in the WP customizer. /
• The if ( ... ) statement checks to see if we have a background image, and if we’re using a widget in Front Page 1 widget area.
• echo ...– This writes the CSS style, so it’s on our front page.

Step 3. Add some CSS to Position the Image

The CSS to position the background image can be added to style-front.php or to a custom CSS editor. You can use the Additional CSS, now part of the WP customizer, (From the WordPress menu, Appearance > Customize and then choose Additional CSS) or a plugin.

If using style-front.css, add the following just below the Table of Contents section, and before the rest of the CSS. It can be pasted anywhere in your Additional CSS or plugin.

body.front-page {
    background-attachment: fixed;
    background-position: center center;
    background-repeat: no-repeat;
    -webkit-background-size: cover;
    -moz-background-size:    cover;
    background-size:         cover;
}

The line background-position: center center; is the one that we’ll use to change the position of the image.

Now you can upload (using FTP) the edited files – front-page.php, and also style-front.php, if you edited there.

Step 4. View the Image on your Site

Now you can upload (using FTP) the edited files – front-page.php, and also style-front.php, if you edited there.

Once that’s done, you may need to clear your caches for your site and your browser. Also you need to have some content in a widget in Front Page 1 widget area.
Your image should be showing as a background image on your site now.

Step 5. Changing the Image Position

The image fills the entire viewport, so not all of the image will be seen at one time, depending on the widget content you have added to Front Page 1 widget area, and the width of the browser window.

The line background-position: center center; will help to position the image as you like.
The first “center” centers the image horizontally from, left to right; the second “center” centers the image vertically, from top to bottom.

If you prefer that the top of the image always shows, use:
background-position: center top;

If you prefer that more of the bottom of the image always shows, use:
background-position: center bottom;

For the left side of the image to always show, use:
background-position: left center;

For the right side of the image to always show, use:
background-position: right center;

If you change the image, you can easily edit the background position for your new image.

Of course, you can use any combination of those; you can get more information about CSS background position here.

Please let me know how it goes positioning your image.