Backstetch - An awesome jQuery plugin for dynamically resizing background images to occupy full size!

Backstretch is a simple yet awesome jQuery plugin that lets you add background images to the whole page or specific div/blocks covering the full area.

While this can be achieved using CSS3's background-size property (using 'cover' as the value or the appropriate fixed/percentage length and width), there are still some issues with this approach -

• This property is not supported by IE7 and IE8. Support was added in IE9.
• You need to ensure that the dimensions of your body tag, especially the height, is set correctly to cover the full screen. This can be tricky to achieve across all browsers especially if your page content does not span the entire screen height or exceed it.

Backstretch automatically determines the dimensions and stretches the background images so that they cover the full area. And backstretch does this without skewing the width to height ratio which is an added advantage.

Background images can also be added as fully-stretched slideshows using backstretch!

And it's simple too. Adding a fully stretched background image to the whole page can be done in just one line with a single backstretch function call -

<!-- add jQuery before adding the backstretch plugin -->
<script src="jquery.min.js"></script>
<!-- add the backstretch plugin -->
<script src="jquery.backstretch.min.js"></script>

<script type='text/javascript'>
    $(document).ready(function() {
        $.backstretch("http://site.com/background-image.jpg");
    });
</script>

Check out the official backstretch page for download, demos and more.

Note: You can use this screen resolution simulator website to test your web page with different resolutions after adding backstretch.