Community Forums › Forums › Archived Forums › Design Tips and Tricks › Custom Backstretch Image only for Home Page
- This topic has 4 replies, 2 voices, and was last updated 9 years, 8 months ago by Porter.
-
AuthorPosts
-
July 28, 2014 at 10:59 am #116109LinsLleisioMember
I've used a custom backstretch image but would like to display this only on the home page. For the rest of the pages I'd prefer just a solid colour.
I've tried the setup here... http://wpsites.net/web-design/display-agency-pro-background-image-only-on-front-page/ but have found my original code to be different so not sure if I have a later copy of Agency Pro.
Notably in the section of the above link: 'Here’s the code that needs moving:'
Instead of:
//* Load scripts only if custom background is being used
if ( ! get_background_image() )
return;
I have:
//* Load scripts only if custom backstretch image is being used
if ( ! empty( $image ) ) {Site not live at the moment, but any pointers would be gratefully received.
July 28, 2014 at 11:33 am #116114PorterParticipantYou should be able to simply edit your style.css file. Add the following:
body.home { //Your specific home page background here. }
July 30, 2014 at 3:00 am #116312LinsLleisioMemberMany thanks for your help... although I wanted every other page BUT home to just be a plain colour, I tried it though to see if it would work and it didn't have any effect whatsoever.
I already have the below in the css... which creates the 'flash' of background colour at load time of the page. And then the backstretch picture fades in. So I'm still wanting to remove the backstretch picture from all pages EXCEPT the home page.
body.agency-pro-red {
background-color: rgb(165, 32, 25);
}I'm still stumped and really appreciate any help or pointers. Thanks, Lins
July 30, 2014 at 4:13 am #116315LinsLleisioMemberOK I solved it with help from the original link on wpsites.net. Just incase this helps anyone else this is what I did.
I cut the below from functions.php and pasted to front-page.php, line 25.
//* Enqueue Backstretch script and prepare images for loading
add_action( 'wp_enqueue_scripts', 'agency_enqueue_backstretch_scripts' );
function agency_enqueue_backstretch_scripts() {$image = get_option( 'agency-backstretch-image', sprintf( '%s/images/bg.jpg', get_stylesheet_directory_uri() ) );
//* Load scripts only if custom backstretch image is being used
if ( ! empty( $image ) ) {wp_enqueue_script( 'agency-pro-backstretch', get_bloginfo( 'stylesheet_directory' ) . '/js/backstretch.js', array( 'jquery' ), '1.0.0' );
wp_enqueue_script( 'agency-pro-backstretch-set', get_bloginfo( 'stylesheet_directory' ).'/js/backstretch-set.js' , array( 'jquery', 'agency-pro-backstretch' ), '1.0.0' );wp_localize_script( 'agency-pro-backstretch-set', 'BackStretchImg', array( 'src' => str_replace( 'http:', '', $image ) ) );
}
}
July 30, 2014 at 6:59 am #116322PorterParticipantYou should have been able to just have css for body, and body.home. body.home would contain the css for the image, where as body on its own would contain just the background color. I haven't tested that, so I can't say it would work for sure, but that was what I was getting at in my post.
It seems you've solved your issue either way though, so good job 🙂
-
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.