Alpha-Image-Loader / PNG-Datein

[Dieter Raber]

Hallo Torsten,

Ich habe mich gerade durch dasselbe Problem durchgegoogelt, hier meine Loesung:

HTML-Datei
<div id="heading"><img src="pics/shim.gif" width="400" height="52" alt="test" /></div> shim ist ein 1px transparentes gif

CSS-Datei
Erst der div-Container mit den Eigenschaften, die fuer alle Browser gelten sollen
#heading{
  position:absolute;
  right:50px;
  top:15px;
  z-index:20;
  background-repeat: no-repeat;
  background-position: top right;
}

Dann das png fuer Gecko und Opera (IE kann body>#heading nicht)
body>#heading {
  background-image: url(../pics/headings/test.png);
}

Und schliesslich das png fuer den IE (nur IE kann * html #heading)
* html #heading {
  filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='pics/headings/test.png');
}

Zu beachten ist, dass bei der IE-Variante der Pfad zum Bild relativ zur HTML-Datei stehen muss, nicht zum Stylesheet.

Gruß,

Dieter