Marc from the StudioPress Community Forums asked this question recently:
Does any one have a technique or advice on how best to have the background image display on only the home page and a solid background on all other pages/posts?
The home page is actually the posts page determined by your Reading Settings and can be your blog page so i think Marc actually means the front page.
There’s different ways you can do this however the easiest is to simply copy and paste the PHP code from your child themes functions file into your front-page.php template file.
Here’s the code that needs moving:
//* Enqueue Backstretch script and prepare images for loading
add_action( 'wp_enqueue_scripts', 'agency_enqueue_backstretch_scripts' );
function agency_enqueue_backstretch_scripts() {
<pre><code>//* Load scripts only if custom background is being used
if ( ! get_background_image() )
return;
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' => get_background_image() ) );
</code></pre>
}
That’s all you need to do to make sure the image you add under Appearance > Background, is displayed on the front page of your site only.
2nd Method
An easier way to control your background image is simply to add a conditional tag to the existing code for the front page:
if ( ! is_front_page() || ! get_background_image() )
return;
Changing Background Color – Exclude Front Page
Simply use the Background Color tool on the same page:
Change Background Color – Front Page Only
Simply add this code near the end of your child themes style.css file before the Media Queries:
.home {
background-color: red;
}
But Its Not Working
Note: If you’re using a static page as your front page, you will need to leave the code in your functions file and add a conditional tag for the page(s) you want the background image to display on. Another solution is to install the WP Backstretch plugin which enables you to conditionally display background images on specific pages.
This solution only works when you use the default WordPress Reading Settings and will not work if you select a static page as your front page.
Was This Tutorial Helpful?