css to replace an image

Question

I am familiar with CSS techniques to replace text with an image. For example, here are 9 of them: http://css-tricks.com/nine-techniques-for-css-image-replacement/

Are there any techniques for replacing images? Is there anyway to set the background of an image to an image and then hide or move the foreground of the image (the image src element).

I am trying to write a skin for a site that has an image that I want to replace. Thanks.

From how I understand it he's trying to do this in pure CSS, with no changes to HTML or JavaScript.

That is correct. I am adding a new stylesheet to an existing page. Let say I can not modify HTML or utilize javascript.

Answer 1

After a little bit of tinkering, I figured it out!

img.someclass {
  background: url("NEW IMAGE URL") top right;
  height: 0;
  width: 0;
  padding: 200px 550px 0 0; /* Insert actual image size (height width 0 0) */
}

This will make the height and width of the actual image 0, but will expand the box to fill the size of the image with padding. The only downside to this is it won't look perfect in older versions of Internet Explorer.