CSS Cookie Cutter Revisited

After seeing this post on StackOverflow I decided to take a look at my cookie cutter method again to see how I could help people use it correctly. First I took Neil's example and tried it out, providing my own images. The result looks good to me, so I'm not clear where he was having a problem. I tested in IE7, IE8, Firefox 3.6, and Chrome. (IE6 clearly doesn't work due to lack of transparent png support.) The CSS, markup, and resulting image is shown below:

.filler {
    padding-left:20px;
    height:448px;
    width:500px;
    float:left;
}

.filler-mask {
    background: url('images/filler-mask.png') repeat;
    position: absolute;
    left:0; top:0;
    height: 448px;
    width: 500px;
}

.filler-picture {
    z-index: 0;
    background: url('http://pics.cssrule.com/pics/cubic2.jpg') no-repeat;
    position: relative;
    height: 448px;
    width: 500px;
    display: block;
}
...
<div class="filler">
    <div class="filler-picture">
        <img src="http://pics.cssrule.com/pics/cubic2.jpg" alt="test" />
        <div class="filler-mask"> </div>
    </div>
</div>

I used a circular "cookie cutter" mask over an image of a boat:

Next I decided to re-write the example a bit and see if I could streamline the code some:

* { margin:0; padding:0; }

.framed, .framed img {
  width:500px;
  height:448px;
  }

.picture {
  position: relative;
  }
  
.mask {
  background: url('images/filler-mask.png') repeat;
  position: absolute;
  left:0; top:0;
  }
...
<div class="framed">
    <div class="framed picture">
        <img src="http://pics.cssrule.com/pics/cubic2.jpg" alt="test" />
        <div class="framed mask"> </div>
    </div>
</div>

Only the class names have been changed in the markup, and now the CSS is considerably shorter. The resulting image is the same.

What this technique really boils down to is using the png mask image as a background on a div, and then displaying that div directly over the top of the photo we want to make the cuts from. We do that using absolute positioning, making sure that we have a parent div that provides a positioning context.