Home/ Questions/Q 271217
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-12T00:07:35+00:00

I am familiar with CSS techniques to replace text with an image. For example,

  • 0

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.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0