Backstretch Image to CSS Background Image in Agent Focused Theme

Share this on:

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.

custom WordPress design custom Genesis theme

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.

You can have a beautiful, hardworking website for your small business.

Tell me about your website project for a personalized solution!


Do you need website tips?

Sign up to get easy-to-use WordPress tutorials, Genesis theme customizations, and other helpful tips for your small business website.

Your email address will be used to send you blog posts. Privacy Policy


photo of Marcy Diaz who owns Amethyst Website Design

Comments

3 responses to “Backstretch Image to CSS Background Image in Agent Focused Theme”

  1. Danny Brown Avatar

    Hi Marcy, great tutorial – I was wondering, is there a way to rotate the image, in lieu of placing a slider in the widget section (which can’t be done on this theme)?

    I’m building a site using this theme, and looking to have a winter image and a summer image rotate between the two, but can’t think of how to do this.

    Thanks!

    1. Marcy Diaz Avatar

      You may be able to modify this tutorial for the Winning Agent theme.
      http://www.winningagent.com/customizing-winning-agent-pro-add-rotating-background-images/

      The only difference that I can see right off is where you paste the code below the section marked Danger Will Robinson!.
      In Agent Focused, backstretch is loaded in front-page.php, and not functions.php.

      1. Marcy Diaz Avatar

        Another way to do it may be to use a slider plugin, such as Soliloquy.
        Follow this tutorial to comment out the backstretch code in front-page.php.
        https://amethystwebsitedesign.com/backstretch-image-to-css-background-image-in-agent-focused-theme/
        You shouldn’t need the rest of the tutorial.
        Then in Appearance > Widgets, find Front Page 1.
        Just add the Soliloquy slider widget to Front Page 1 or use a Custom HTML widget to use the Soliloquy shortcode.
        You won’t need the text widget; you can use captions on the slider images.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.