imgタグの画像を背景画像として表示

背景画像だけを表示したいけど空divを使うのはちょっと・・・という場合に使えるテクニックを紹介します。

使うタグはimgタグのみ。ただし、imgタグのsrcには1x1pxの透過GIF画像を指定します。そしてCSSでそのimgタグに背景画像を指定します。

img.bgimg {
  background: url("path_to_img") no-repeat;
}

幅や高さはXHTMLで指定してください。これで背景画像として表示できます。CSSで画像を指定できるので、最近流行の CSS Sprite も使えます。

普通の画像 背景画像で
star(normal) star(using the technique)