Javascript,Programming 05/01/2013 at 08:31

Full Screen Backgrounds with JQuery and Backstrecht plugin

jquery
A few days ago, doing web design for a small business in my town, I found the problem that Internet Explorer 8 does not properly represent the full screen background that wanted to put on the page.

My original idea was to use CSS, with some hack for Internet Explorer, however, searching the web i found a JQuery plugin that did exactly what I needed, that is, put a full screen background in all browsers (Internet Explorer included) and scale this background dynamically as needed.

This plugin is called Backstrecht and can be downloaded here:

http://srobbin.com/jquery-plugins/backstretch/

After downloading, follow the steps below to add it to our web project:


1.- Copy the plugin to the project directory tree.

 

When you unzip the zip file we downloaded, we will find two files named:

  • jquery.backstretch.min.js: Production version of the plugin.
  • jquery.backstretch.js: Development version of the plugin.

Both files contain the same functionality. However, the version ending in .min.js, has been compressed (removing line breaks and renaming variables) to optimize its size and this way optimize bandwidth in production environments.

If we want to modify the functionality of the plugin, we should download the development version, as the production version would be very difficult to modify and debug.

Whatever version you decide to use, you must copy the file .js to the directory tree of our project.. Typically to the js directory or javascript directory of the project.

 
 

2.- Load the plugin at the header section of the page

 

The next step will be to load the plugin in the section HEAD of our HTML document. Since this is a JQuery javascript framework, we must be careful in our HTML document and load JQuery first, since Backstrecht depends on the functions defined in JQuery to perform it´s work.

With this in mind, the HEAD section of our page would be similar to the following snippet:

..... .....
<!-- Javascript Frameworks -->
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
..... .....
<script type="text/javascript" src="js/jquery.backstretch.min.js"></script>
..... .....


3.-Call the plugin when the document finishes loading.

 

Finally, we will call the plugin to stablish the full screen background. To do so, we can put the call at the bottom of the body tag, or use the JQuery function:

$(document).ready(function() {});

Using this last expression, the function $(document).ready() is defined as follows:

$(document).ready(function() {
     $.backstretch("./img/background_name.png");   
});


This post is also available in Español.

Tags:

1 Comment

Leave a reply

required

required

optional


%d bloggers like this: