How to make transparent layer over an image

Posted on: July 15, 2011 Category: Freebies, Website Tips Comments: 0

We wanted to put a image over everything on a web page, so we searched and searched the web until we finally found this simple little code:

<div>
<img src=”/images/404a.png” alt=”” style=”position:absolute;” />
<div style=”position:absolute;width:Xpx;height:Ypx;background-color:#000000;filter:alpha(opacity=0);opacity:0;-moz-opacity:0;”></div>
</div>

It’s great, just throw this about anywhere in the body of the web page and it will create a layer over place for your image. Now just use a transparent image like the one we used here and play around with placement and image size to make it fit correctly.

Here’s the code again in case the image is blocking you from grabbing it:

<img src=”/images/404a.png” alt=”” style=”position:absolute;” />
<div style=”position:absolute;width:Xpx;height:Ypx;background-color:#000000;filter:alpha(opacity=0);opacity:0;-moz-opacity:0;”>