CSS Masking with Transparent PNGs

One of the most recent tools in my web design arsenal, and I’m not sure why I didn’t see it before, is PNG masking. Basically the techinque requires 2 images, a PNG with transparency to act as a mask and a background image. The PNG mask is positioned after the background image and a negative margin is added to pull the mask up and over top of the background image.

For the example lets use a png mask 160px wide and 100px high. We are using a CMS where the client has the ability to swap out images but they don’t have the skill or the means to edit the images other than resize them. So we’ll create a PNG mask that looks like an old polaroid and position their image behind it.

That should pull the 2nd image, the PNG mask, up over top of the 1st image, the background image. To be sure we don’t have any problems, let’s set the z-index for the mask to 100 or above to make sure it’s floating above the background image.

.png-mask {
position: absolute;
margin-top: -100px;
z-index: 100;
}

That’s it! It’s a pretty basic and simple effect that does the trick.

Update: IE is really finicky about how you order your stack. If you’re having problems getting one object to float under the other and even Z-INDEX doesn’t seem to be working, place the bottom most object of your stack before your topmost objects. Where other browsers ignore ordering IE builds your stack from top to bottom.