Amethyst Website Design –

The Agent Focused Genesis youngster theme makes use of Backstretch, a jQuery script, so as to add the big picture on the theme entrance web page. A often requested query is how one can get extra management over the place of the background picture. It’s pretty straightforward to transform the theme to make use of a CSS background picture, which makes positioning extra simple.

custom WordPress design custom Genesis theme

The steps on this tutorial so as to add a CSS background picture can usually be utilized to different themes which have a backstretch picture, though a number of adjustments could also be wanted.

The Steps to Take

  • First, we’ll remark out the sections that add the backstretch script.
  • Next we’ll add a brand new perform so as to add the physique background-image type, each in front-page.php.
  • And then we’ll add the positioning kinds to style-front.css.

All the code adjustments are on this GitHub Gist.

(The Agent Focused theme is a theme for realtors, however may also been used for different functions, from StudioPress and Winning Agent.)

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

At the highest of front-page.php is that this part – Enqueue scripts for background picture. Add /* and */, so it seems like the next:

 str_replace( 'http:', '', $picture ) ) );

	}
*/

	// 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 so as to add a brand new part that provides your picture from the WP customizer as a background picture to the entrance web page. Add this code just under the part above.

<?php // Do not add this line once you copy and paste code.

// Add background picture type to WP head.
add_action( 'wp_head', 'agentfocused_background_styles', 99 );
perform agentfocused_background_styles() {

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

	// Add type provided that background picture is getting used.
	if ( ! empty( $picture ) && is_active_sidebar( 'front-page-1' ) ) {

		echo '
			physique.front-page {
				background-image: url(' . esc_html( $picture ) . ');
			}
		';

	}
}

So now let’s evaluate what this code does.

  • add_action( ... ) – This writes our background picture CSS to the WP head.
  • $picture = get_option( ... ) – This comes from the file /agent-focused/lib/customise.php, strains 52 to 55, which provides the picture used within the WP customizer. /
  • The if ( ... ) assertion checks to see if we now have a background picture, and if we’re utilizing a widget in Front Page 1 widget space.
  • echo ...– This writes the CSS type, so it’s on our entrance web page.

Step 3. Add some CSS to Position the Image

The CSS to place the background picture may be added to style-front.php or to a {custom} CSS editor. You can use the Additional CSS, now a part of the WP customizer, (From the WordPress menu, Appearance > Customize after which select Additional CSS) or a plugin.

If utilizing style-front.css, add the next just under the Table of Contents part, and earlier than the remainder of the CSS. It may be pasted wherever in your Additional CSS or plugin.

physique.front-page {
    background-attachment: mounted;
    background-position: middle middle;
    background-repeat: no-repeat;
    -webkit-background-size: cowl;
    -moz-background-size:    cowl;
    background-size:         cowl;
}

The line background-position: middle middle; is the one which we’ll use to vary the place of the picture.

Now you may add (utilizing FTP) the edited recordsdata – front-page.php, and in addition style-front.php, when you edited there.

Step 4. View the Image in your Site

Now you may add (utilizing FTP) the edited recordsdata – front-page.php, and in addition style-front.php, when you edited there.

Once that’s accomplished, you might have to clear your caches in your web site and your browser. Also you might want to have some content material in a widget in Front Page 1 widget space.
Your picture must be displaying as a background picture in your web site now.

Step 5. Changing the Image Position

The picture fills your complete viewport, so not all the picture might be seen at one time, relying on the widget content material you have got added to Front Page 1 widget space, and the width of the browser window.

The line background-position: middle middle; will assist to place the picture as you want.
The first “middle” facilities the picture horizontally from, left to proper; the second “middle” facilities the picture vertically, from high to backside.

If you like that the high of the picture at all times exhibits, use:
background-position: middle high;

If you like that extra of the backside of the picture at all times exhibits, use:
background-position: middle backside;

For the left facet of the picture to at all times present, use:
background-position: left middle;

For the proper facet of the picture to at all times present, use:
background-position: proper middle;

If you modify the picture, you may simply edit the background place in your new picture.

Of course, you need to use any mixture of these; you may get extra details about CSS background position here.

Please let me know the way it goes positioning your picture.

 

Leave a Reply