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.

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: