Często spotykam się z pytaniem

Dalaczego pod Internet Explorerem nie są wyświetlane obrazki w formacie .png w prawidłowy sposób?

Poniżej odpowiedź... 

Dziś standardowe pytanie co zrobić z półprzezroczystym/przezroczystym obrazkiem .png lub .gif, żeby internet Explorer wyświetlał go prawidlowo?

Należy użyć filtru. Mamy dodyspozycji gotowe rozwiązanie, które znajduje się pod tym adresem. Jak je podłączyć? wystarczy użyć komentarza warunkowego dostępnego w przegladarkach Microsoftu: 

<!--[if lt IE 7.]>



<script defer type="text/javascript" src="pngfix.js"></script>



<![endif]-->

Ale co jeżeli chcemy użyć obrazka png jako tła? Otóż wystarczy do strony na samej górze dodać jeden element <div /> o określonym id np. ieBg. Następnie tworzymy deklarację css na wzór poniższej:

body {
    background-color: #fafbe9;
    background-image: url("../img/bglilia.png");
    background-position: 10px 80px;
    background-repeat: no-repeat;
}
* html body{
    background-image: none;
}
* html #ieBg{
    position: absolute;
    top: 80px;
    left: 10px;
    z-index: -1;
    width: 350px;
    height: 350px        filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img/bglilia.png',  sizingMethod='scale');
}

Co to oznacza? Pierwszy selektor jest przeznaczony dla wszystkich przegladarek. Ustawia tlo i je pozycjonuje. Kolejny widoczny jest  tylko dla IE.  Zeruje on tlo  strony.  Następny ustawia element #ieBg  oraz wykorzystuje filtr w celu uzyskania przezroczystości dla obrazka.

Proste