OK! Before starting let me warn you that this technique is totally based on HTML & CSS, so make sure you take care of all this on the server end as-well, which basically means that if the page in the background has a form, then it shouldn’t be active & things like that. So moving on: I have taken an old template I was working on to show the Lightbox overlay effect on it. It is shown below; you can take anything you like instead.

We obviously wouldn’t be making this template here.

What We Need:

• Make a 1px * 1px image in Photoshop and fill a new layer with black and reduce it’s opacity by 50% then hide the background layer and save the transparent image as a 24bit PNG in the images directory name it overlay.png
• Make another image around 400px wide and make something you want to display on a page under maintenance and save it in the images directory name it maintain.png

Moving on: Once you have the page to be in the background open it in a text editor of your choice; As the body tag opens, place this code(even before the container).

<img src="./images/maintain.png" id="maintain" alt=”Under Maintenance” />
<div id="overlay">&nbsp;</div>

It is the hierarchy we need to understand here. We want to display a dark transparent overlay on the whole page therefore we place the division with an id of overlay on the top and then we want to display a maintenance image on top of it and so we place the img tag with that image even on top of the overlay division.

Now make a new stylesheet in your CSS directory, call it technique.css, include it on the page and then place this code in it. (You can place this code in your master stylesheet as well).

#overlay{
width:100%;
height:1100px; /*about the height of the background page*/
background:url('../images/overlay.png') repeat; /*to include & repeat the image on the whole page*/
position:absolute; /*to place it anywhere on the page*/
top:0;/*start from  the top*/
left:0;/*and start from  the left*/
z-index:90; /*tells the browser that it should be displayed above the items with a “z-index” value less than 90*/
}
#maintain{
position:absolute;
left:50%; /*so the image starts after half of the page from the left */
top:50%; /*so the image starts after half of the page from the top */
margin: -140px 0 0 -200px; /*we bring up the image by half it’s height and bring it left by half it’s width*/
/*now the image should be in the center of the page.*/
z-index:100; /*tells the browser that it should be displayed above the items with a “z-index” value less than 100*/
}

IE6:

To make the transparent background image render transparent in IE6, download the DD_belatedPNG JavaScript. Place the .js file in the js directory of the page and if the IE browser version is less than 7 then include it in our page right before ending the body tag, then open another script tag and run the fix method, pass in the ID of the overlay division in it. To know more about the DD_belatedPNG read it’s documentation.

<!--[if IE 6]>
<script src="./js/DD_belatedPNG_0.0.7a-min.js"></script>
<script>
  DD_belatedPNG.fix('#overlay');
</script>
<![endif]-->

I’ll be continuing with the Build-Up Series in the next post.

Thanks for reading!

Download the Source Code!