Background sans taille PNG

Bonjour,

J'ai tenté en vain plusieurs méthode pour palier à mon problème qui est de faire apparaître la transparence de mes .Png sous IE.

J'ai réussi pour les images avec la méthode filter du Css et un sizingMethod crop mais en fait le problème survient lorsque je veux remplir une colonne indertiminée en hauteur avec un fond de 1x sur 1px .Png sur FF tout va bien comme d'habitude mais IE c'est une autre histoire (6).

Merci d'avance pour votre aide.

Bonjour,

Aurais-tu un peu plus de détails sur l'affichage proposé par IE stp ? Une URL ou à défaut une capture d'écran ? As-tu essayé avec sizingMethod='scale' ?

Oui, j'ai deja essayé avec 'scale'. Mais en fait, j'ai juste une colonne transparente sous IE.

Je ne vois pas du tout ce que tu veux faire . S'agit-il de la transparence d'un png en tant qu'image ou en tant qu'arrière-plan ? Une URL de test ou à défaut une capture d'écran me permettrait de t'aider, mais sans ça, ça risque d'être difficile .
Modifié par Jihel (12 Dec 2006 - 09:09)

Bonjour,

Hizo a écrit :
lorsque je veux remplir une colonne indertiminée en hauteur avec un fond de 1x sur 1px .Png sur FF tout va bien comme d'habitude mais IE c'est une autre histoire

Malheureusement ce que tu souhaites réaliser est impossible : toutes les solutions permettant la transparence d'un png sous IE interdisent :
- de positionner l'image png dans un background
- de répéter l'image png dans un background
En définitive, soit le graphisme que tu développes peut se satisfaire de la transparence gif, soit tu parviens à utiliser une image non répétée positionnée en 0,0 par rapport au coin haut-gauche. Sinon tu devras accepter une dégradation du design sous IE.
A noter que IE7 sur ce point reproduit exactement le même défaut que IE6. Donc si tu tiens réellement à avoir un design identique sous IE et les navigateurs gérant le png, il te faut prendre en compte ce point dès la conception du design.

[EDIT] désolé Jihel , par respect du droit de l'auteur, et pour ne pas avoir plus d'ennui, je corrige la citation[/EDIT]
Modifié par Xavier (12 Dec 2006 - 17:47)

Bonjour Xavier,

Heu la citation n'est pas de moi mais de Hizo .

De plus je suis d'accord avec toi sur le premier point : on ne peut pas positioner l'image png (du moins je n'en ai pas la connaissance).
Par contre la deuxième affirmation doit être modulée. Sauf erreur de ma part si j'ai un arrière-plan de 1px sur 1px, mettons noir à 80%, je peux reproduire l'effet de répétition avec la sizingMethod='scale'. Certaines galeries d'images (dont je n'ai plus le nom en tête) utilisent cet effet pour afficher la photo avec un arrière-plan noir avec une transparence de n%. C'est un effet très à la mode.

Ceci dit je ne pense pas qu'il soit possible de le faire pour une image qui ne serait pas totalement unie. La méthode 'scale' devrait (si son nom est bien choisi) agrandir l'image.

Je n'ai pas eu le temps de tester, je le ferai certainement ce soir !
Modifié par Jihel (12 Dec 2006 - 14:59)

a écrit :
A noter que IE7 sur ce point reproduit exactement le même défaut que IE6. Donc si tu tiens réellement à avoir un design identique sous IE et les navigateurs gérant le png, il te faut prendre en compte ce point dès la conception du design.

Il me semble que IE7 gère convenablement la transparence des images PNG.
Au moins avec des images en Niveaux de gris 32 bits, en tout cas, ce qui n'est pas le cas d'IE 6, à mon grand désarroi. J'ai pu le constater en travaillant sur cette page de test (y a encore plein de trucs à faire dessus, mais les images de fond sont en PNG).

On m'a par ailleurs affirmé qu'IE 6 gérait la transparence des PNG jusqu'à 24 bits, à condition qu'ils soient enregistrés en couleurs indexées, mais je suis plus que dubitatif vis-à-vis de cette information.

Salut Sam_Lam,

Il me semblait aussi que IE7 gère bien la transparence 24 bits de png, mais je n'ai pas pu vérifier là tout de suite. Pour 32 je ne sais pas... Par contre pour IE6 je te confirme qu'il ne gère pas la transparence partielle. Il faut utiliser le filtre Microsoft dont parle Hizo.
Modifié par Jihel (12 Dec 2006 - 17:20)

A priori, cette image est encodée sur 32 bits en niveaux de gris (ça a peut-être un importance, alors j'insiste dessus) et IE7 rend bien sa transparence.

Pour IE6, si je comprends bien, on pourrait, en théorie, avoir un PNG transparent encodé sur plus de 8 bits, à la condition que la transparence soit "tout ou rien" (opacité totale ou transparence totale) ? Ou bien la personne qui m'a donné cette info est à côté de la plaque ?
Modifié par Sam_Lam (12 Dec 2006 - 17:27)

@ Jihel > erreur de citation corrigée
Par ailleurs je maintiens que les différentes solutions qui circulent pour rendre IE6 compatible png interdisent l'emploi du positionnement et de la répétition de l'image en CSS dans le background.

@ Sam_Lam > je maintiens également que IE7 ne permet pas, comme IE6, le positionnement et la répétition d'une image png avec CSS en background. Je n'ai pas nié que IE7 gérait la transparence png dans d'autres cas.

J'aimerais bien savoir si IE 6 gère la transparence "avec PHP" parce que là j'ai fait une image avec la bibliothèque GD, IE 7 et FF l'interprètent très bien mais n'y aurait-il pas une solution pour que IE 6 aussi interprète la transparence de mon image?
Modifié par Hizo (12 Dec 2006 - 18:08)

Xavier a écrit :
@ Sam_Lam > je maintiens également que IE7 ne permet pas, comme IE6, le positionnement et la répétition d'une image png avec CSS en background. Je n'ai pas nié que IE7 gérait la transparence png dans d'autres cas.

Pourtant, avec ça dans ma feuille de style

body {  
  background-image: url(http://nyctalope.troll.free.fr/between.png);
  background-position: center top;
  background-attachment: fixed;
  background-color: #900;
}

j'obtiens bien l'effet escompté sous IE7 !
- L'image est à la bonne place (centrée horizontalement, calée en haut verticalement)
- L'image est répétée en mosaïque
- La couleur d'arrière plan est visible par transparence

Ce n'est qu'au bureau, en visualisant ma page avec IE 6, que j'ai réalisé, avec horreur, que mon image était un PNG encodé sur plus de 8 bits...

@ Xavier : OK, je n'avais jamais refléchi à la répétition sous IE mais à présent c'est fait. Ca servira sûrement un jour ! Merci !

@ Sam_Lam : Nativement et avec les techniques habituelles, IE6 ne prend pas en compte le canal alpha des png. Un png encodé en plus de 8bits donne ce genre de choses (voir capture en bas du message). L'arrière plan est "comblé" par une couleur choisie par IE mais ce qui est "sous" l'image n'apparait pas. Dans ton cas, le rouge se voit sous Firefox par exemple mais pas sous IE. Pour y parvenir le plus simple est d'enregistrer ton image avec le fond rouge au format que tu veux.
En résumé IE affiche les png 24 mais de façon incorrecte.


@Hizo, encore une fois si tu veux de l'aide précise ta demande, joint une URL de démo et explique nous ce que tu souhaiterais afficher. On ne peut pas t'aider si tu ne nous en donnes pas les moyens

Jihel > Sous IE 6 certes, j'en suis parfaitement conscient. En revanche, sous IE 7, ça passe très bien !

Les deux images (between.png et between.png ) sont des PNG en niveaux de gris sur 32 bits (je dirais 24 bits de nuances de gris et 8 bits de canal alpha). Les deux sont en background, la première sur le body, la deuxième sur un <dd>. tsathoggua.png est positionnée par background-position: center top; et se répète convenablement. Je n'ai mis en oeuvre aucune astuce, j'ai pas de plug-in ou d'extension pour IE 7...

Alors si IE 7 ne gère pas la transparence des PNG, j'aimerais qu'on m'explique pourquoi je vois ça...

Je ne suis pas du tout un défenseur d'IE, au contraire, mais comme il est toujours le navigateur le plus répandu (version 6 et 7 confondues), je vérifie toujours le résultat de ce que j'ai fait sous IE.
Modifié par Sam_Lam (13 Dec 2006 - 10:48)

On va résumer tout ce qu'on a dit ici :

IE 6 ne gère pas nativement la transparence partielle des png 24. Il existe des filtres et d'autres bidouilles qui permettent de contourner ce problème mais avec les restrictions suivantes :
- pas de positionnement de l'arrière-plan
- pas de répétition de l'image

En revanche IE7 gère le png 24 et les affiche convenablement, les place et les répètent.

Effectivement je constate également que la transparence fonctionne sous IE7, même si l'image est positionnée et répétée dans l'exemple proposé par Sam_Lam.
Désolé de vous avoir induit en erreur.

En fait j'avais réalisé des tests dans un cadre un peu différent. Je m'explique. Il y a un autre cas qui pose problème à IE6 dans l'usage des png (malgré l'emploi éventuel de correctifs) c'est l'image en background d'un élément devant recevoir un événement :hover. Typiquement il peut s'agir d'un menu déroulant utilisant la transparence pour des ombres. Dans ce contexte ce qui ne fonctionnait pas sous IE6 ne va pas mieux dans IE7 : le hover réagit mais l'image n'offre pas la transparence.

J'avais par ailleurs lu un article en anglais (malheureusement je ne parviens pas à remettre la main dessus) qui semblait aller dans le même sens. En substance, IE7 incorpore pour gérer la transparence une technique de contournement employée classiquement pour IE6, et de ce fait la gestion de la transparence ne serait pas complète.

Je vais faire qq tests complémentaires dès que j'en ai le temps pour mieux comprendre.
Modifié par Xavier (13 Dec 2006 - 11:39)