CODEWITHSUNDEEP
htmlcss
Igor Mukhin
Igor Mukhin

Reputation: 15388

How to show an image on html page using only css?

I want to show images on the page but I don't want to hardcode the references to the images in html.

Is it possible to do something like:

HTML:

<span id="got-easier"></span>

CSS:

#got-easier { image: url(/i/trend-down.gif); }

(IE6 should be supported)

Upvotes: 0

Views: 526

Answers (3)

Parziphal
Parziphal

Reputation: 6902

In case you want to display the images inline, position:absolute does the trick:

#got-easier {
  display:inline;
  position:absolute;
  width:img-Xpx;
  height:img-Ypx;
  background:url(/i/trend-down.gif) no-repeat;
}

The only problem with this is that, since the image position is absolute, it will overlay whatever is next to it (in IE6 it might appear behind), and the workarounds that I found to fix this (with both CSS and jQuery) aren't supported in IE6. Your image-container will have to be followed by new line.

This might be useful when, for instance, you'd like to place a (?) image next to a form caption or a button (that usually have nothing next to them) to display help with onmouseover.

Upvotes: 0

Kyle
Kyle

Reputation: 67234

Yes, use a background image :)

#got-easier { background-image: url(/i/trend-down.gif); }

Remember to set a span to display: block; and set width/height of your image if you use it.

As David Dorward pointed out, if it's an image relevant to the information, it should be included in the document with an <img> tag and alt attribute.

Upvotes: 3

Mon Noval
Mon Noval

Reputation: 380

Heya, the common term for it is css Image Replacement technique (or IR). Here are the commonly used methods currently. Just choose any of the two ;)

/* Leahy Langridge Method */
span#imageName {
  display: block;
  height: 0 !important;
  overflow: hidden; 
  padding-top: 0px;  /* height of image  */
  width: 0px;  /* width of image */
  background: url(url/of/image.jpg) no-repeat
}

/* Phark Method */
span#imageName {
  display: block;
  width: 0px; 
  height: 0px; 
  background: url(url/of/image.jpg) no-repeat; 
  text-indent: -9999px
}

Upvotes: 1

Related Questions