Supersized background image

For one of the requirements Jess asked for the website to look specifically like the leaflet that has been produced so I was provided with a copy of the files used for the design of the leaflet.

Taking into consideration of different browsers, screen sizes and resolutions I had to think of a way to create an effect background that would appear the same in all of the things that I considered to be a problem (stated above). Having attempted to create a standard background in the HTML page which was unsuccessful a jquery plugin was mentioned called supersized.

Supersized was a plugin created to make any image fit the browser screen whilst still maintaining the image. In other words the user can resize the to constraint and the image would remain the same dimensio ratio (until the screen is too small).

Whilst this all sounded a good idea and simple instructions were provided it was not as easy as it was made out to be. Setting out the code was fine and I understood that the image had to be a certain constraint however some of the coding became quite hard to understand. One big problem that always occurred was that when the browser window changed size the image would slide down the screen, showing a white background...not very appealing. The problem? a simple change of CSS coding. The problem is shown below:

The CSS code that caused the problem

#supersize img, #supersize a{
height: 100%;
width: 100%;
top: 0;
left: 0;
position:absolute;
z-index: 0;
}

and the CSS code that solved the problem

#supersize img, #supersize a{
height: 100%;
width: 100%;
top: 0;
left: 0;
position:fixed;
z-index: 0;
}

As you can see it was a simple change by switching 'absolute' with 'fixed' however this took many hours of work as we believed that the problem was with the code inserted into the HTML, but we were wrong and have learnt from our mistakes.

Another problem that occured was that my supersized background worked fine in FireFox however did not work in Internet Explorer (what a surprise). Having tried different options including contacting the designer of the leaflet and redesigning the background myself I found a simple solution, changing the image from a 'jpeg' to a 'gif'. It now works fine across all the broswers. HOORAY!!