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…

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)

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

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

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: firefox 4+microsoft IE

Thanks for reading this post and as usual, I’m open to suggestion and critics (positive of course).
Do comment on!

Share

Post Author: Shreyo

is a developer & involved in project management; loves to learn, guide and keep himself updated on UI/UX and WordPress. He is also an amateur photographer mostly macro shots.