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

Page content

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

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

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

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

普通の画像背景画像で
![star(normal)](/uploads/2008/03/bookmark.png) star(using the technique)