I can’t unfortunately show you the page as it is currently only on my machine. Your example has almost everything I want, but there is still space between the bottom of the viewport and the flames (see http://css-tricks.com/forums/viewtopic.php?f=2&t=3153&start=10#p14665 that post, the spot labeled "Empty space").
I also can’t take a screenshot of the element in firebug (when it’s color coded) but the line of images are colored blue and the space below is uncolored, which seems to mean that the element really is at the bottom of it’s containing element (body).
However, if I make the height of the footer 30 px (twice one image) and have it disregard repeat-x, then I can fit two rows of images (see attachment), however, I can’t make it 15 px and have one row of images. This makes me wonder if this can be done with a 30px high image.
I have played around with nearly all variations & screen res, the only thing I can come up with to get roughly what you want is to make your footer show at all times by using position fixed.
if you go down any other road, it all depends on the size of your page, I get space after the footer in some screen resolutions depending on the main content areas height. it might fit fine in a 1024×768 but it is a small height in a 1280×1024 res so this shows space at tbe bottom.