[CSS] AlphaImageLoader voor transparante backgrounds

Zoals velen wellicht weten kan je met de AlphaImageLoader filter voor IE/Windows transparante PNG's gebruiken als background in deze browser. Je gebruikt * html om deze filter alleen te gebruiken bij IE/Windows, en html>body voor een normale background voor alle andere browsers.

Elke browser behalve IE/Windows:[code:1:6767d28612]html>body div#footer
{
background: url("images/bg.png") no-repeat 0 0;
}[/code:1:6767d28612]

Alleen IE/Windows:[code:1:6767d28612]* html div#footer
{
background: none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=‘http://www.browsbox.com/CSS/195/static/images/bg.png’,sizingMethod='image’);
}[/code:1:6767d28612]

Tot dusver niks nieuws onder de zon. Doch heeft deze filter me flink wat zoekwerk opgeleverd.

De background van mijn footer was 20px hoog. Mijn footer was uiteraard hoger, er zou nog tekst in komen te staan. Ik had 30px toppadding gezet op de footer, zodat mijn tekst netjes onder de background kwam te staan. Dit ging in elke browser goed, behalve in IE/Windows. Daar verdween de tekst met 30px toppadding, net alsof er overflow en height samengebruikt werd. Dus moest het wel aan IE/Windows zelf liggen.

Wanneer ik de padding afzette, stond de tekst bovenop de background, en was de link in de tekst niet aanklikbaar. Het gedrag was wel erg raar, de footer was maar even hoog als de background. Het zou dus aan de AlphaImageLoader filter moeten liggen.

De enige parameters zijn de url van de afbeelding en de SizingMethod. De url stond goed, dus was de sizingMethod verkeerd. sizingMethod is optioneel, en geeft aan hoe de afbeelding getoond moet worden. “image” is de default waarde, en daarbij wordt de afbeelding gewoon ingevuld. De box waarin de afbeelding staat, is voor de filter dan maar even hoog, de rest wordt niet getoond. Dat was dus exact wat er verkeerd ging. sizingMethod=“crop” bleek de oplossing te zijn. Nu werd de background transparant getoond, en kan er ook nog andere content in de box gebruikt worden. Links waren nu ook aanklikbaar.

Hopelijk heeft iemand er iets aan. Het enige waar ik nog een oplossing voor zoek is de background-position te emuleren.

Hoe komt dit zo irritant breed? Wel een handige tip.