Hide hard coded image with CSS

You can hide a hard coded image with it’s background image by using CSS. Set the height property to 0, then set the padding-bottom property to the value of the height. So if you have an image that is 300px by 200px and wanted to visually replace the image with a different image using just CSS, you would do something like this:

img {
width: 300px;
height: 0;
padding-bottom: 300px;
background-image: url(yourimage.jpg);
}

This is a very handy method to use when replacing hard coded PNGs which will show fine on most browsers, but need special treatment for IE6 to show properly.


Can’t get enough? You may be interested in these posts as well:
  • Using PNGs
  • Remove scrollbar from Textarea in IE
  • Ignorance is Freedom
  • You Might Be a Designer If
  • IE6 Background Flicker

    • About this entry

    You’re currently reading “Hide hard coded image with CSS,” an entry on Love is not Over

    Published:
    03.14.07 / 6pm
    Category:
    Tips & Fixes