As you are attempting to do all of this to block people from snaffling your images, please be aware that this is a bit of a Holy Grail, and I don't think you're there yet.
I haven't seen the foreground/background table idea used before and it appeals to me. You might want to check for crossbrowser compatibility. I haven't messed about with table background images for quite a few years, but when I did, I noticed that different browsers treated them very differently. This may all be resolved by now. I'd test thoroughly anyway.
Second up, though, is a more serious issue. Browser caching. If your visitor has this enabled, then your image will automatically be stored on their hard drive. They'll just need search and find it.
Ooh... just had a thought!
You could get around this by slicing the image so that your table is a 10x10 grid of 100 sections, each of which contains a piece of the overall image. This would increase processing power on your side in order to slice up the image, though you could get around this by pre-slicing it and serving up the pre-prepared fragments. It would increase bandwith usage as the client would need to raise a hundred requests instead of one to get the image. It would also increase client-side processing needs in order to piece it all back together.
The advantage would be that your visitor would have to trawl through their cache, find the 100 pieces and stitch them together by hand. Not impossible, certainly automatable with a custom client, but an extra hurdle all the same.
There's probably a very elegant flash solution to this, you create a simple flash movie which just contains the image. I've never worked with flash, but I'm sure that's easy.
Just remember though, whatever you do to display the image, it will end up on the visitor's screen and a simple screengrab will make it theirs forever.