• Skip to primary navigation
  • Skip to content
  • Skip to footer
logo Amethyst Website Design

Amethyst Website Design

Affordable WordPress Website Design for Small Business

  • Home
  • About
  • Services
  • Praise
  • Portfolio
    • Portfolio
    • Case Studies
  • Blog
  • Contact »

Genesis Tutorials Themes

Backstretch Image to CSS Background Image in Agent Focused Theme

March 28, 2017 Marcy Diaz

Share this post:

TwitterFacebookPinterestLinkedinEmail

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() . '/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() . '/js/backstretch.js', array( 'jquery' ), '1.0.0' );

		wp_enqueue_script( 'agentfocused-backstretch-set', get_stylesheet_directory_uri() . '/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() . '/js/modernizr-custom.js', array( 'jquery' ), '1.0.0' );
}

Step 2. Add a New Section

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.

<?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 ) . ');
			}
		</style>';

	}
}

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.

Share this post:

TwitterFacebookPinterestLinkedinEmail

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

About Marcy

Marcy-fixed-whtbkg-220

I'm Marcy Díaz, the owner of Amethyst Website Design, a small business located in Phoenix, Arizona (in Ahwatukee Foothills). I help people, like you, grow your business with an affordable WordPress website design. Sign up for my blog and website tips that help you manage your own website.

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

Tell me about your website project for a personalized solution!

Contact Marcy »

Reader Interactions

Comments

  1. Danny Brown says

    September 8, 2017 at 11:27 am

    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!

    Reply
    • Marcy Diaz says

      September 8, 2017 at 1:22 pm

      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.

      Reply
      • Marcy Diaz says

        September 8, 2017 at 1:30 pm

        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.

        Reply

Leave a Reply Cancel 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.

Footer

Meet Marcy

Amethyst Website Design is a small business owned by Marcy Díaz. I help people, like you, with your website by creating an affordable WordPress website using Genesis themes to fit your business and budget. I especially love working with new and small business owners, and can help you with the online part of your business. Read More »

Let’s Connect!

  • Facebook
  • Twitter
  • Pinterest
  • Linked In
  • GitHub

Contact Info

Amethyst Website Design
PO Box 94782
Phoenix, AZ 85070

602.759.0501
marcy@amethystwebsitedesign.com

Contact Form
Located in Ahwatukee Foothills
member of local first az
  • Sitemap
  • Cookie Policy
  • Terms and Conditions
  • Privacy Policy

© 2019   Amethyst Website Design   ◆   Log in

Using WordPress and the Genesis Framework

This site uses cookies for the best browsing experience. By continuing to use this site, you accept our Cookie Policy »OK, got it!