PNG’s transparentes en IE6

Es indiscutible las bondades que ha traído la inclusión de Unisys del formato PNG. Lo mejor de él, es la mayor profundidad de colores (miles, aún comprimido) y la facilidad de uso de su canal alfa. Su uso en web aún es limitado, ya que como no será sorpresa, Microsoft Internet Explorer no lo soporta ni siquiera en su versión 6 (al parecer sí en la v7). Mozilla Firefox, Apple Safari, Opera y otros no tienen problemas con visualizarlo.

La idea de este post es crear un PNG transparente con un drop shadow (sombra) negro para que se note su ventaja con respecto al ultrapasado, pero nunca mal ponderado GIF transparente. Existen muchos códigos que permiten utilizarlo, con JavaScript o filtros de IE, pero ninguno funciona correctamente sobre CSS.

Sigue el estilo utilizado:

#imagen {
width: 400px;
height: 219px;
background-image: url(“pildora.png”) !important;
background-image: none;
filter: none !important;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’imagen/pildora.png’);
}

Explico: el ancho y alto son para establecer un área y que todos los browsers abran la imagen del mismo tamaño. El problema que se tiene con los filter, radica en que funciona para IE pero no para Firefox, y si agregamos el background, funciona en Firefox pero no en IE. La solución es agregar !important, para que Firefox tome ciertos elementos, y otros no. Además aún así el código XHTML valida según W3C, no el CSS ya que filter es de Microsoft y no de W3C (corregido).

La solución es utilizar un background normal para Firefox con un !important y justo debajo un background vacío (none), ya que IE no reconoce !important y tomará como referencia el inmediatamente siguiente. Luego de esto, viene el filter vacío (none nuevamente) y una cláusula !important para Firefox y el consiguiente filter AlphaImageLoader para que IE reconozca el alfa sobre los PNG’s.

Un detalle que puede que hayan notado: en el filter de IE se especifica la ruta de la imagen en un nivel diferente que la de IE. Esto porque la imagen se debe de especificar no desde la ruta del CSS (como ocurre con el background), sino con dirección de la raíz de la página web (no del sitio, me refiero a llamarla de forma relativa, no absoluta).

Ver resultado

Suerte y a disfrutar del buen diseño con los PNG transparentes.

PD: gracias por sus comentarios para hacerme ver el error de validación del CSS.

  1. Pabl0d

    Está muy bueno…
    ¿Para que versiones de IE funciona?… o ¿es sólo la versión 6 la que tiene este problema?
  2. CSSLab Admin

    hasta la 6 ningun IE visualiza PNG’s transparentes, se supone q la 7 esto estaria integrado ya.
  3. padapapoulos

    Dices que el css valida, pues creo que no, lo acabo de probar y no valida;
    ????????
  4. CSSLab Admin

    This Page Is Valid XHTML 1.0 Transitional!

    si valida…….
  5. aNieto2k

    Si que valida el HTML, pero no valida el CSS.
  6. padapapoulos

    Perdona admin, no pretendo molestar, te lo aseguro, es mas, si hace falta te ayudo,si lo necesitas claro, que seguro que no, mi comentario era solo un aviso, nada mas.
    Lo mejor para todos.
    un saludazo desde Londres.
  7. CSSLab Admin

    No me habia fijado en ese detalle, le echare una mirada, es importante q valide en el caso de un futuro desarrollo strict. Publicare la modificacion.

    Saludos desde el tercer mundo. :D

  8. CSSLab Admin

    Claro, lo q no valida en el CSS es el filter q es propietarrio de Microsoft, no de la W3C. De hecho, ningun filter de MS valida, claro está. Ya corregi parte del código, y el txt de este post. Gracias por sus observaciones.
  9. marco

    pues a mi no me sale, ya me estoy hartando de esto :) jejje

    no se porque, tantos recursos que e probado y en ninguno me queda, tan bonito que se ve con png

    nimodo, tendre que entrarle con gif
  10. CSSLab Admin

    como q no te funciona! esta ultra probado este codigo.. algo mas estas haciendo, o tu PNG no esta bien exportado… revisa bien como lo estas aplicando, debes respetar las carpetas tal cual esta en el codigo CSS. suerte.
  11. padapapoulos

    Hola a todos, si usais un comentario condicional para ie y ahi le colocais los filtros, si que valida.
    Un saludo.
  12. Impaler

    Muy práctico tu aporte. Pero un detalle quisiera hacer ver: a pesar de visualizar tu página con Firefox a 1280×1024, no es posible ver correctamente el div de la izquierda, ya que el de la izquierda se monta sobre él. Es decir, al intentar leer el ejemplo CSS que has puesto, no se puede leer completamente la línea más ancha porque queda debajo de la columna donde están los comentarios. Sólo veo hasta esto:

    progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’imagen/p

    El resto de la línea se pierde.

    Por lo demás, todo bien.

    Un saludo
  13. Impaler

    Fe de erratas:

    He puesto “ya que el de la izquierda se monta sobre él” y debiera decir “ya que el de la derecha se monta sobre él”.

    Por otro lado, debido al ancho fijo del de comentarios, tampoco quedó completa la línea del comentario donde explicaba el problema.

    Saludos
  14. CSSLab Admin

    Si impaler ya me habia dado cuenta de ese detalle, pero por lo mismo no era para tener una palabra tan larga como para q se pase por debajo de la columna de comentarios. pero bueeno, en este post fue una excepcion.
  15. Susana

    Yo quisiera hacer enlaces con imágenes transparentes, y no sé realmente cómo plantearlo.

    Agradecería un poco de ayuda.

    Muchas gracias.

    Un saludo.
  16. CSSLab Admin

    Susana: linkea la imagen <a href="link.html"><img src="imagen.png"></a>
  17. inyaka

    bueno despues de mucho por fin logre solucionar el problema, en este foro tambien trataron este problema http://www.cristalab.com/foros/viewtopic.php?t=21618 , yo personalmente lo estoy implementando de la siguiente forma en mi CSS.
    digamos que le asigno la clase “titular” a una tabla donde pondre titulares y preciso darle un fondo transparente, entonces:
    .titular1{
    background-image: url(ruta/fondo.png) !important;
    background-image: none;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (src=’ruta/fondo.png’, sizingMethod=’scale’);
    background: repeat-y;/*o lo que se te venga en gana */
    }
  18. Antonio Hermida

    Hola qué tal, aplicando el filtro para que los pngs transparente se vean bien en el IE6 a través de CSS no consigo hacer que un png se vea repetido como fondo de una celda de tabla en el IE6. Solo aparece una sola vez, con el filtro aplicado, eso si. A ver si me puedes echar una mano con esto. Gracias.
  19. CSSLab Admin

    Antonio, probaste quitando el width, height y agregando background:repeat: repeat; del codigo entregado mas arriba??? cuentame q tal te va con eso. saludos.
  20. Antonio Hermida

    Bueno Jorge, he estado navegando por las aguas transparentes de este post y tengo que felicitarte por su elegancia de diseño y generosidad de contenidos. Y bueno, he probado tu consejo y nada. Lo cual me plantea una reflexión sobre este asunto de los navegadores que te quería comentar: si, como supongo, el script que publicas en este artículo esta ya más que testeado, y magistralmente explicado, por tu parte, ¿porqué se tienen que presentar este tipo de problemas impresisos que no hacen más que entorpecer nuestro trabajo? En fin, estoy bloqueado y cabreado con esto.
    Un saludo y gracias de nuevo.
  21. David

    Buenas!!!
    Muchas gracias por molestarte en poner estas cosillas.
    Voy a probarlo de inmediate. Solo con lo de !Important ya me doy por satisfecho :D

  22. CSSLab Admin

    Antonio, si me entregas un codigo para verlo, podria ayudarte mas. el codigo lo recontra probé en todos los browser a mi disposicion, pero modificaciones varias (como lo has propuesto, como fondo de celda) no lo tenia pensado y suelen pasar esas cosas. dame una URL mejor para echarle un vistazo a lo q pretendes hacer. Saludos!
  23. Antonio Hermida

    Gracias Jorge, en este url está lo que quiero hacer:
    http://www.antoniohermida.com/index2.htm
  24. tazatriste

    loco, gracias. no encontraba cómo hacer esto, no está en ninguna parte. entera pulenta la página.
    vale.
  25. Antonio Hermida

    Hola Jorge, te olvidaste de mi. Yo he estado superliado y no he podido mirar nada de lo que nos ocupa. Un saludo
  26. CSSLab Admin

    Hola antonio, sieento mucho, se me fue completamente.. te importaria poner tu probleema en los foros, en Ayuda -> Códigos asi puedo ver mejor lo q podria ser. adjunta link, el codigo html, css…. ahi puedo desmenuzar el asunto y verte una solucion mejor.

    salu2
  27. zulo

    hola
    sigo luchando por los PNG transparentes,

    1) porque en algunas paginas no me pide de activar el activex y en las que hago yo si, osea en las mias no se ve nada hasta que lo activo?

    2) yo estoy tratando de poner un PNG transparente de fondo y arriba una imagen y le pongo un mapeado para hacer un link
    el tema es que el fondo no me aparece hasta que activo el activex y cuando lo activo me desaparece el mapeado y me quedo sin links

    bueno, si alguien sabe como solucionarlo…
    muy buena la pagina,
    saludos.
  28. ITG

    Hola a todos,

    Llevo un par de dias volviendome loco con la implementación del código para poder ver transparencias de PNG’s definidos en los CSS. Aunque desde luego está fantásticamente explicado ;) y además parece muy sencillo de implementar, no consigo dar con la clave en mi código.. que es este:

    div.contenedor{
    margin: 0 auto;
    padding: 0;
    width: 830px;
    background: url(../img/fbbg760.png) repeat-y 50% 0 !important;
    background: none;
    filter: none !important;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’img/fbbg760.png’);
    }

    Con este código, en Firefox veo el PNG correctamente, pero en Explorer, no veo ni siquiera la imagen.

    Varias dudas al respecto:

    1.- Vereis que he definido background, en vez de background-image.. He hecho esto porque con background-image, no se veía el PNG en Firefox, con background a secas, si.. y a falta de pan… xD Pero sabeis a que es debido?

    2.- No entiendo muy bien el sentido del – background: none; -, ya que si lo quito, si que me aparece el PNG en Explorer, aunque sin el filtro aplicado (me aparece con el típico bloque gris). Por lógica, si le dices al css que no te ponga fondo, como va a salir luego, con o sin filtro? :?

    3.- No tendrá nada que ver que esté definiendo una class y no un ID, verdaD? O_o

    4.- Qué está fallando para que no aparezca el **** PNG? ;)

    Muchas gracias a todos!
    Saludos..
  29. mosses

    no funciona brother
  30. lidia

    ¿Y qué hago para repetir la imagen? Necesito hacer un repeat-y, pero consigo que se repita en todos los navegadores excepto explorer 6. ¿sabes alguna solución para esto?
  31. santosvz

    me disculparan pero encuentro contadiciones entre el ejemplo y los comentarios del autor, asi que les comento que para que funcione en FF, IE, O lo hice asi y me funciona correctamente:

    body {
    background: #000;
    }

    #NombreElemento {
    width: 400px;
    height: 219px;
    background-image: url(“images/pildoras.png”) !important;
    background-image: none;
    filter: none !important;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’images/pildoras.png’);

    }
  32. ramiro

    muy buen sitio
  33. ecosonoro

    Hola a todos… bueno, despues de muchas horas intentando lograr que el maldito IE 6 leyera las transparencias en png, he conseguido por ahi un fabuloso codigo javascript que resuelve el problema, solo hay que incrustarlo antes del HEAD y listo.. el script al ser leido por firefox, este automaticamente anula la funcion y no crea problemas para este navegador… los rollover funcionan bien en firefox, incluso en usandolos en capas y arrastrables.. es muy bueno.. la desventaja es que en el IE 6 anula la funcion rollover pero solo de las imagenes png., ahi se los dejo para que lo examinen un poco. cualquier duda o sugerencias, escribanme…

    Ejemplo…

    function correctPNG() // correctly handle PNG transparency in Win IE 5.5 & 6.
    {
    var arVersion = navigator.appVersion.split(“MSIE”)
    var version = parseFloat(arVersion[1])
    if ((version >= 5.5) && (document.body.filters))
    {
    for(var i=0; i”
    img.outerHTML = strNewHTML
    i = i-1
    }
    }
    }
    }
    window.attachEvent(“onload”, correctPNG);

    SUERTE!!!
  34. CSSLab Admin

    ecosonoro, ese es el codigo de PNGFIX y justo ayer lo estaba usando, con algunos problemas (me transparenta un PNG y no el segundo de una misma pagina). Salu2.
  35. Lidia

    Hola otra vez…. conseguí que todo me funcione, en todos los navegadores he conseguido ver una imagen png. Pero en el momento que programamos la página con php, es decir, en el momento que creamos un index.php, para llamar al index.html deja de funcionar en IE6, no es exactamente que deje de funcionar, se sigue viendo el png, pero dejan de funcionar todos los enlaces, incluso el menú en flash. En todos los navegadores funciona bien, excepto en IE6. ¿Alguien sabe a qué se debe esto?
  36. David

    Para que se repita:

    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’imagen/pildora.png’,sizingMethod=’scale’);

    Yo también he estado 3 horas peleandome jeje.
  37. Ricardo

    Has intentado poner link a la prueba?… yo tengo el error que al utilizar ese código, no funcionan los links.. en el IE 6…
  38. Alejandro

    Hola a todos y gracias de antemano por leer este requerimiento, Estuve leyendo todos los mensajes de esta sección, tambien he probado los codigos que han colgado; con FF no tengo ningun problema pero con IE 6 no se ve mi imagen PNG, es como si no lo encontrara, no se ve nada, mi pregunta es, si el IE 6 no tiene la capacidad para mostrar PNG con fondo transparente o si estoy haciendo algo mal. aqui les paso mi codigo:

    #logo{
    position:absolute;
    top:-10px;
    left:0px;
    width:193px;
    height:243px;
    background-image: url(../img/fondo.png) !important;
    background-image: none;
    filter: none !important;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’../img/fondo.png’);
    -moz-opacity:.85;
    filter:alpha(opacity=85);
    opacity:.85;
    }

    las ultimas 3 lineas son para darle transparencia alfa (lo encontre por ahi); eso si funciona pruebenlo!

    Bueno ojala me puedan ayudar, recuerden debo hacer que el PNG con fondo transparente se vea en IE 6, porque aun es muy usado!!
  39. Francesc

    Buenas, esta perfecto el codigo pero en IE ma han dejado de funcionar los inputs de texto… sabeis que podría ser?

    Mil gracias!
  40. pitu

    hola a todos, primero de todo agradecer al webmaster por la cantidad de información interesante que hay en esta página! eres un crack!

    Luego veo que nadie a contestado a la duda del xq no funcionan los enlaces con pngs transparentes. He leido por alli que poniendo:
    a { position: relative; z-index: 200; }
    ya deberia funcionar, pero el tema es que sigue sin funcionarme en IE6…

    Tengo el siguiente código:

    Inicio •
    Mapa del sitio •
    Aviso Legal •
    Contacto

    con el css:
    #pie {
    position:relative;
    background-position: top left;
    width: 685px;
    height: 57px;
    left: 40px;

    background-image: url(img/pie_verde.png) !important;
    background-image: none;
    filter: none !important;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’img/pie_verde.png’);
    background-repeat: no-repeat;
    }
    #pie #info {
    position:absolute;
    font-size: 11px;
    font-weight: bold;
    text-align: center;
    width: 465px;
    margin-top: 20px;
    }

    Alguien puede ayudarme?? muchas gracias a todos!!
  41. CSSLab Admin

    Pitu, publica tu duda en los foros con el codigo completo y ojala enlace online, ya q con lo q pusiste no alcance a dimensionar tu problema. saludos.
  42. pitu

    Ya lo he puesto en el foro tal y como me proponias ;)
    http://www.csslab.cl/foros/viewtopic.php?t=125

    Gracias por dedicarme un poco de tu tiempo!!
  43. kbite

    Bueno estoy trabajando con IE7.. toy viendo que si funka con los enlaces con el primer codigo.. voy a probarlo con el 6.. ojalas funcione.. Gracias
  44. ciberwing

    en la ruta de la imagende fondo no se usan comillas.

    bueno a mi no me funciono pero les pongo algo que si funciona:

    div#imagen-cualquiera {
    width: 700px; /* ancho de la imagen */
    height: 173px; /* alto de la imagen */
    background-image: url(logo.png) !important; /* url sin comillas */
    /* menor que ie 7 */
    background-image: none;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’sites/default/themes/deco/logo.png’);

    }
  45. ciberwing

    div#imagen-cualquiera {
    width: 700px; /* ancho de la imagen */
    height: 173px; /* alto de la imagen */
    background-image: url(logo.png) !important; /* url sin comillas */
    /* menor que ie 7 */
    background-image: none;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’sites/default/themes/deco/logo.png’);

    }
  46. ciberwing

    uta, no pesca las etiquetas condicionale de ie!!!
  47. jose roberto (vevni)

    no manches jorge, super maestro, si funciona, solo que tengo un degradado que hace el efecto de sombra en los bordes, aplico el codigo y me borra todo el contenido, pero si lo hace,
    solo aplike este truco en el footer, por eso digo que si jala!
  48. Rafael

    Buenas, la transparencia de los div en IE6 me funciono perfectamente. Ahora tengo un problema, esto bloquea todo el contenido que se encuentra dentro de los div’s tales como links etc. Como soluciono esto???

    Gracias de antemano, saludos
  49. Darwin Vivallo

    Por lo menos a mi me resulto en IE5 y en lE6 no toma para nada el script. Pero funciona en algunos. Lo revise en http://browsershots.org/
  50. Darwin Vivallo

    ¡ Me resulto ! , pero tengo que dar la dirección completa de la foto (http://www.elsitio.com/galeria/foto.png). Eso
  51. ismael

    si funciona pero al momento de poner enlaces dentro del div ya no funciona los enlaces… alguien tiene la solucion!!!! ??
  52. Victor Humanes

    Hola a tod@s!

    A mi me funciona correctamente, pero hay un detalle que no consigo. Tengo una imagen png de fondo de un DIV. Esta imagen es más pequeña que el ancho del DIV entonces quiero que no se repita y que se centre. Eso lo consigo en la etiqueta background para Firefox, ¿pero donde le indico esos atributos para IE?

    Gracias!!
  53. Jorge Epuñan

    Victor Humanes, no te sirve background-position: center center? o lo q es lo mismo background-position:: 50% 50%
  54. Fernando

    Hola que tal un saludo,yo eh estadoi trabajando con los png, tengo un problema con los link que aun no se como solucionar, miren tengo un div contedor con un fondo png semi-tranparente que ocupa casi toda la pagina, el problema que tengo es que dentro de ese contenedor tengo unos links que en ie6 no funcionan, ya me canse de buscar y no encuentro una solucion, saben de alguna????”’
  55. dani

    ¿y qué sucede si la imagen es una “list-style-image”?
  56. Jorge Epuñan

    Fernando: postea algun link en los foros para ver q esta pasando.. asi como explicas me cuesta imaginarlo. dani: solo con background-image….. saludos.
  57. Egomanus

    Gracias, ya encontre el problema, consiste el colocar una imagen .gif transparente al frente (trasparente.gif) y luego la que queremos que se vea (imagen.png), asi fue que me funcionó, de resto siempre me mostraba la imagen sin trasparencia o me dejaban de funcionar los inputs y links,
    hay que colocar las medidas de la imagen a mostrar porque si no se colocan tomará las medidas de la imagen transparente,
  58. Egomanus

    <img src=”trasparente.gif” width=”100″ height=”100″ style=”filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’imagen.png’, sizingMethod=’scale’);” alt=”">
  59. Javier Rodriguez

    saludos recientemente me he encontrado con el problema y si se puede arreglar. En mi caso especifico me queda una duda, tengo que hace unos boletines y de cara al diseño necesitaria poder meterlo todo dentro de la etiqueta de mi html, osea por requerimientos de una aplicacion solo puedo rellenar el body de mi Html. Me gustaria saber si desde el codigo html puedo meter ese CSS como valor del atributo “style”. Un añadido es que tampoco puedo usar java script.

    Gracias por adelantado, de todas formas ya me habeis salvado la vida.
  60. Fran

    Cojonudo tío. Me salvaste la vida.

    Funciona de la óstia!!! Gracias!!!!
  61. Javier Enrique León

    Me parece genial la verdad que el tema de los PNG y las deficiencias de IE molestgan a todos el vernos obligados a usar un PNGFIX por el IE 6 y lineas de código para los fondos cuando la solución simplemente sería erradicar el IE6 y de pasadita si se pede todos las demás versiones.
  62. Andy

    Tienen razón, valida el XHTML:
    http://validator.w3.org/check?uri=http%3A%2F%2Fwww.csslab.cl%2Fejemplos%2Fpng%2Findex.html&charset=%28detect+automatically%29&doctype=Inline&group=0

    Pero el validador CSS de la W3C no lo valida:
    http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fwww.csslab.cl%2Fejemplos%2Fpng%2Findex.html&profile=css21&usermedium=all&warning=1&lang=es

    Que inútiles los de Microsoft. De todos modos según YouTube el Explorer 6 es obsoleto.
  63. Josef

    No me funciona!, aunque debo decir que lo estoy viendo en IE 6 corriendo bajo Darwine en Mac OS. Sólo se ve toda la página en rojo. Me molesta este tema de los png’s para IE porque ni siquiera tengo las herramientas para corregirlas. Maldición, ayuda!!
  64. Jorge Epuñan

    Josef: lamentblemente tendras q probarlo en un PC con Win y IE6 ya q con Wine no podras verlo funcionando; tb tengo lo mismo y no es posible.

    Saludos.
  65. Tomás Girardi

    Para quienes les desaparece el resto del contenido del div, como a Rafael. Intenten con sizingMethod=’crop’:
    ej: filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’estilo/pics/ayuda_mini.png’,sizingMethod=’crop’);

    A mi me funcionó así en IE6

    Para los que no les funciona de frentón: Si están haciendo copy/paste, asegurense de que no hayan ‘ ` ‘ en el código. Las comillas dentro de la url mejor no ponerlas y las que van desntro de la invocación al filtro deben ser ‘ ‘ ‘ .

    Saludos
  66. modeff

    Hola a todos!!! he probado el enlace de “ver resultado” para probar el efecto del script de arriba y en todo funciona perfecto pero al ponerlo en el IEtester en IE6 solo veo el fondo ¿es que cambió algo en IE6?? en mi código me pasa exactamente lo mismo, se ve únicamente el fondo. }
    El código es el mismno que el de arriba, cuide de cambiar la ruta para el filtro y que sea desde la raiz y se nota que me coge el filtro porque desaparecen, antes me los mostraba grises (son unos degradados grices trasparentes). Probé con PNG 8, PNG 24 (que me salían negros) y con PNG 32 y nada.
    Muchas gracias y saludos
  67. Jorge Epuñan

    modeff: con ningun IETester podras visualizarlo, ya q solo emulan el comportamiento del motor de IE6 y no su totalidad; deberas probarlo en una instalacion de este browser.

    Suerte!
  68. modeff

    Muchas gracias por el dato Jorge, efectivamente lo probe en otro computador y funciona. Si no tuviera W. Vista podría usar el Multipler :( buscare una web para visualizar mi web con IE6
    Saludos
  69. Castaneda

    probe su propuesta pero no se ve la imagen PNG con fondo transparente que utilizo, la estoy usando en el header, y pruebo si funciona con IETester, mi pregunta es si puedo confiar en ese programa?

    Gracias!
  70. Jorge Epuñan

    Castaneda: tal como le mencionaba a modeff (leer comment anterior), las transparencias PNG para IE deben ser probados en este browser y no en emuladores.

    Salu2.
  71. Castaneda

    :D Hola Jorge!

    Gracias por tu respuesta!!

    Ya se ve la transparencia probando con IEtester, el problema eran las comillas de el enlace al quitar las comillas funciona , mi pregunta es si eso esta bien a la hora de usar IE6 browser, con IEtester ya se ve la transparencia que uso en el header….

    Tambien necesito usarlo para una imagen que se repite (“y” veces) y no me funciono, no se ve el fondo en el IEtester, simplemente no aparece, mi pregunta es lo estoy haciendo mal, o no funciona para imagenes que se repiten.

    Esta es la sintaxis que estoy usando :

    center{
    background-image: url(Imagen.png) !important;
    background-image: none;
    filter: none !important;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (src=Imagen.png);
    background-repeat: repeat-y;
    background-position: top center;
    }

    Que me sugieren?

    Pd. Estoy usando los enlaces “sin comillas” , pues en el Header me funciono probandolo en IEtester.

    Mil Gracias y buen dia!
  72. Castaneda

    Hola

    Encontre por ahi en un foro esta misma solucion per con unas lineas extras:

    #image {
    background:url(images/image.png)!important;
    background-image: none;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=’image’, src=’images/image.png’);
    }
    Las lineas extras son:

    sizingMethod=’image’,

    Esto es correcto?

    Mil Gracias!
  73. Marta

    Lo acabo de probar y funciona! Muchísimas gracias
  1. [...] PNG Transparentes en IE 6 [...]
    PNG Internet Explorer, soluciones varias - aNieto2K
  2. [...] tema es otro en los que más usuarios entran a CSSLab buscando por soluciones reales. En mi anterior artículo ...
    CSSLab » Definitivo: PNG’s transparentes en IE6
  3. [...] add-on para hacer eso que mencionas. Puedes leer artículos como estos, quizás halles una solución: CSSLab - PNG’s ...
    vB3.8 hack para Png transparentes con IE6 existe??