CSS Top Image Preloader

Why use such preloader? It's nice practice when You have large image as Your "top" background. Visitor will see "Loading..." animation insteed of empty space. That's more elegant.

First we have to make our site skeleton. This will be simple Top, and content part:

xHTML:

Save it as preloader.html

Now we have to think about page width. I'll choose 770px, and top image will be 770 x 250px. You can use any image, just make it "large" ... 150kb for example, and call it top.jpg. Last thing is loader.gif file. It can be any image.

With this knowledge  I can start the CSS part

Save it as style.css

Time for explanations.

<div id="loader">
  <div id="top"></div>
 </div>

This is loader mechanism. Top image div is inside loader div. That will make loader.gif (only 2.5kb) load before top.jpg. After top image loads, loader.giv will be under it (but still there). Simple and effective.

* {margin:0; padding:0;}

This is global reset. Set margins and paddings to 0. Very useful.

div#container {width:770px; margin:0 auto;}

Main container. Holds whole content in one place. margin:0 auto is for center thing.

div#loader {background:url(loader.gif) center no-repeat;}

Loader div. Background image was set and centered.

div#top {height:250px; background:url(top.jpg) no-repeat;}

Top image div. Nothing special here.

div#content {height:550px; background-color:#3300FF;}

Just sample content div. Height and background-color was set to show result.

As You can see - It's not so hard at all.

Now You should have 4 files:

- preloader.html
- style.css
- top.jpg
- loader.gif

Now it's time to see final result.

If You have extreme fast internet connection - You won't see preloader. It's only 150kb Image ... for 1Mbit it's under 2sec. Sample page with preloader - click here.