Full screen background using Jquery

Few days back, one of my client wanted her website to be revived. I was later told that the website should have a full screen background image i.e. a window size background image. It was possible and an easy job to do but this increases the site’s downloading time and i explained this to my client. Yet, they wanted. I agreed to this (and told myself ‘as you wish’). 🙂

Well, i thought to show off the code i used there. It’s quite simple. Here we go…

<script type="text/javascript">
    $.backstretch("images/vat-bg.png");
</script>

$.backstretch("images/vat-bg.png");

</script>

That’s all you need to add to have a full screen background image. But there are two supporting files for this.

Jquery library (we need that always) 😉
a js file that makes this work

Jquery library (always the latest)

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

1	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

The file that makes this work, please download here…

You checked this in Firefox, Chrome, etc and it works, right?
But hold on, don’t forget Microsoft IE

Try this code, particularly in Microsoft IE

<div align="center">
    <div class="row grid_12" style="padding: 100px 0;" id="logo_container">
        <div style="background: url(images/logo.png) no-repeat; left center; height: 90px;">&nbsp;</div>
    </div>
</div>

</div>

The result is awkward. The background image has been rendered exactly the same as per our wish but, left some white space where our container has the content. To solve this use

z-index:99;

with the inline styling or using a conditional CSS like

<!--[if gt IE 7]>
    <style type="text/css">
        #logo_container { z-index:99; }
    </style>
<![endif]-->

<!--[if gt IE 7]>

#logo_container { z-index:99; }

</style>

<![endif]-->

This conditional CSS says that if version of IE is greater than 7, then apply the below styling. But, it’s not really necessary to specify the version, we can just say

Which means any IE version.
We’ll discuss about the Conditional CSS asap for a better understanding! Till then you can manage with this. 🙂

Well, this is all you have to do for a full screen background image and does works smoothly in all the browser now.

Personally tested and works in: