Earlier this month I completed a redesign of a long-time client’s site that I first worked on in 2008. Because the client always has loads of great imagery (she’s an interior designer), we decided to incorporate full-screen backgrounds. I’m using the lightweight jQuery plugin Backstretch to handle the resizing.
I had some problems getting this working in WordPress, so I thought I’d post my process here. The main issue turned out to be that the version of backstretch.js I got from the demo site was not working; I have a correctly-functioning version here to download.
This little script makes images stretch to the full size of the browser window and resize as needed; it works fine down to IE7. I’d recommend an image width of no less than 1440px, this seems to work well.
Adding the Script
Add this to your theme’s functions.php, this registers and loads the backstretch.js script.
|
1 2 3 4 5 6 7 8 |
/* Add backstretch scripts */ function my_custom_scripts() { if ( !is_admin() ) { wp_register_script( 'backstretch', get_stylesheet_directory_uri() . '/js/jquery.backstretchV1.min.js', 'jquery', '1.0', true); wp_enqueue_script( 'backstretch' ); } } add_action( 'wp_enqueue_scripts', 'my_custom_scripts' ); |
Then add this function, this one adds a backstretched image to individual pages which you can control. This one is placed in the footer to make sure it loads after jQuery.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
/* Add backstretched image by page */ function add_this_script_footer(){ if ( is_front_page() ) { ?> <script type="text/javascript"> jQuery.backstretch("<?php echo get_stylesheet_directory_uri(); ?>/images/backgrounds/home-1226.jpg", {speed: 176}); </script> <?php } elseif ( is_page('2') ) { ?> <script type="text/javascript"> jQuery.backstretch("<?php echo get_stylesheet_directory_uri(); ?>/images/backgrounds/approach-B052.jpg", {speed: 176}); </script> <?php } elseif ( is_page('279') ) { ?> <script type="text/javascript"> jQuery.backstretch("<?php echo get_stylesheet_directory_uri(); ?>/images/backgrounds/gallery-1324.jpg", {speed: 176}); </script> <?php } else { ?> <script type="text/javascript"> jQuery.backstretch("<?php echo get_stylesheet_directory_uri(); ?>/images/backgrounds/blog-joyce-great-room.jpg", {speed: 176}); </script> <?php } } add_action('wp_footer', 'add_this_script_footer', 20); |
I hope this helps someone else!
Related posts:
- Integrating TinyNav into WordPress for Responsive Menus I’m currently working on building a good responsive base version...
- Deregister Meteor Slides scripts and styles in WordPress This took a bit to figure out. If you only...
- Adding author images to post meta in WordPress There are a number of plugins and tutorials for adding...
« Using FitVids for responsive video in WordPress Line-by-line explanation of the WordPress .htacess file »
Wow! After all I got a web site from where I be able to actually obtain helpful information regarding my study and
knowledge.
Hi Debbie,
Thanks for this insight, got me cooking with gas!
Have a great one!