I am an independent WordPress web consultant with 10 years of experience in WordPress theme installation, customization, administration, maintenance, support, documentation, troubleshooting and PSD/design to WP.
What if I wanted to use different background images on different pages….and still keep them responsive ?
I was able to add a desperate BG image on differing pages, but the image is not static like on the Home Page. i.e I want the the image to function like the BG image does on the home page using the backstretch.js
Not sure how to invoke this for differing pages ??
Sridhar, What would be the reverse logic – if is home, use background but otherwise no. This would prevent the need for adding every new page to the php.
On second thought I think what I’d really like is if the content.sidebar.wrap could be colored white. Site-inner won’t work because it then puts color on the home page where you don’t want it. I’ll play with that but for the record, I tried your code and it worked perfectly! I think perhaps I’d like a middle ground however, white content background, white widgets background and for that area between the two, white while still keeping the background image behind it all. (that’s why I thought content.sidebar.wrap)
good to know. I’m weighing my options here. If I ditch the image on all but home, our code will be excellent. My alternative plan is to use this CSS to color the content.sidebar.wrap and keep the image behind that. Here is what is working for that purpose:
I was planning to incorporate this (have the backstretch image appear only on the front-page), however it seems that the current functions.php file is:
//* Enqueue Backstretch script and prepare images for loading
add_action( ‘wp_enqueue_scripts’, ‘agency_enqueue_backstretch_scripts’ );
function agency_enqueue_backstretch_scripts() {
To be filed under ‘keep trying everything’ :
Once I hit ‘send’ on this comment above and continued to try things I successfully simply removed the code above from the functions.php file and added it to the front-page.php file (just as noted by Sridhar in GitHub Gist).
Thanks!
What if I wanted to use different background images on different pages….and still keep them responsive ?
Ideally this is what I’d like to do too — without custom code for each page ID.
Check this out: http://www.sridharkatakam.com/different-backgrounds-different-pages-posts-wordpress/
The CSS trick is not working for me. I got the background image off the other pages, but it will not change to white.
I was able to add a desperate BG image on differing pages, but the image is not static like on the Home Page. i.e I want the the image to function like the BG image does on the home page using the backstretch.js
Not sure how to invoke this for differing pages ??
http://www.sridharkatakam.com/different-backgrounds-different-pages-posts-wordpress/
Nice tutorial! 🙂
Do you know how I could NOT display the header area where the logo and the header right menu go’s on the home page??
http://www.sridharkatakam.com/remove-header-agency-pros-homepage/
Sridhar, What would be the reverse logic – if is home, use background but otherwise no. This would prevent the need for adding every new page to the php.
On second thought I think what I’d really like is if the content.sidebar.wrap could be colored white. Site-inner won’t work because it then puts color on the home page where you don’t want it. I’ll play with that but for the record, I tried your code and it worked perfectly! I think perhaps I’d like a middle ground however, white content background, white widgets background and for that area between the two, white while still keeping the background image behind it all. (that’s why I thought content.sidebar.wrap)
I needed this for a project of mine and stumbled in Sridhar’s blog (excellent articles by the way) and wanted exactly what you need…
After some digging around, I found this code to put the BG only on the homepage :
Change this :
//* Load scripts only if custom background is being used
if ( ! get_background_image() )
to this (in functions.php)
//* Load scripts only if custom background is being used
if ( ! get_background_image() || !is_home() )
Hans,
good to know. I’m weighing my options here. If I ditch the image on all but home, our code will be excellent. My alternative plan is to use this CSS to color the content.sidebar.wrap and keep the image behind that. Here is what is working for that purpose:
.content-sidebar-wrap {
background: #fff;
border-radius: 3px;
overflow: hidden;
}
.home .content-sidebar-wrap {
background: none;
}
Thanks Sridhar for this post.
John c,
I think that’s a good alternative use CSS, but use .site-container instead .content-sidebar-wrap could be more effective for that purpose:
.site-container {
background: #fff;
}
.home .site-container {
background: none;
}
Regards
[…] Carl asked […]
I was planning to incorporate this (have the backstretch image appear only on the front-page), however it seems that the current functions.php file is:
//* 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 ) ) );
}
}
I’m not sure exactly where to add the conditional ‘if’ w/ the page array.
Thanks!
To be filed under ‘keep trying everything’ :
Once I hit ‘send’ on this comment above and continued to try things I successfully simply removed the code above from the functions.php file and added it to the front-page.php file (just as noted by Sridhar in GitHub Gist).
Thanks!