Use the jQuery Backstretch plugin to create stunning background images for your website, which resize to fit all screen resolutions.
This tutorial will explain how to add full screen background to your WordPress site.
1. Download
Download the jQuery Backstretch plugin by Scott Robbin
2. jQuery
Upload jquery.backstretch.js to your website, then add the following to footer.php.
<script type="text/javascript" src="<?php bloginfo('template_url');?>/javascript/jquery.backstretch.js"></script>
<script type="text/javascript">
$.backstretch("<?php bloginfo('template_url');?>/images/bg.jpg", {speed: 150, centeredX: false, centeredY: false});
</script>
Ensuring that your replace the urls with the correct ones from your theme folder. The first line is calling the Backstretch plugin, and the second the location of the background image.
- speed controls how quickly the background will fade in once full loaded
- centeredX and centeredY are set to false so that the image is aligned to the top left.
Alternatively, you could call the background image from a custom field, if you wanted to have multiple backgrounds on the site.
<?php if ( get_post_meta($post->ID, 'bg_image', true) ) { ?>
<script type="text/javascript">
$.backstretch("<?php echo get_post_meta($post->ID, "bg_image", $single = true); ?>", {speed: 150, centeredX: false, centeredY: false});
</script>
<?php } ?>
Where the custom field name is bg_image and the value is the url to the image.
3. Demo
Visit the landing page for GoldCoastLocal to see it in action.