Firefox & image de fond

Amis du jour, bonjour.

Je viens vous voir pour un problème que j'ai vu apparaître récemment, et qui concerne Firefox.

Je suis un peu honteux de ne pas être arrivé à trouver la solution, j'avoue que cela me turlupine grandement.

---

Il s'agit de la propriété background qui agit bizarrement sous Firefox. Je précise que je suis déjà depuis quelques années sous Mac et que je n'ai plus Firefox sur mon poste, donc je ne peux pas dater l'apparition de ce comportement.

Pour faire bref, dans certains cas, Firefox ne prend pas en compte la déclaration d'une image de fond, bien qu'il applique la couleur désignée.

background: #000 url(images/stripes.png);

J'ai validé mes feuilles de style (ça m'est arrivé deux fois : sur un projet client, et sur un projet personnel), et cela ne vient pas de là. J'ai vérifié que la version 'shorthand' de la propriété était bien utilisée (ce qui est le cas).

Je me suis rendu sur le MDC (Mozilla Developer Center) pour y trouver ceci. La syntaxe est bien la bonne, mais leur exemple inverse deux propriétés...

Sur la référence officielle, la syntaxe que j'emploie est bien la bonne, à savoir par exemple :

background: #000 url(images/stripes.png) no-repeat top left;

Mais bien entendu, ce code ne marche pas non plus. En ajoutant des guillemets simples ou doubles non plus.

La première fois, pour mon projet client, il m'a suffit d'attribuer à l'élément html cette image de fond pour que cela marche, mais je suis pas très fier du workaround (d'ailleurs si vous pouviez m'éclairer sur ce point : est-ce propre de donner à l'élément html une image de fond ?). Et d'ailleurs, cela ne fonctionne pas sur mon projet personnel (qui est un document xml traité via xslt pour donner un document html sans doctype, si ça peut aider).

Que ça ne fonctionne pas un sur un projet personnel, no problem. Mais pour un client, c'est bien plus gênant...

Est-ce que vous auriez des idées à ce sujet s'il vous plaît ? Je reste à l'affût de toute demande de compléments d'informations

Bonne journée,
Jérôme Verzier.

Jerome Verzier a écrit :

La première fois, pour mon projet client, il m'a suffit d'attribuer à l'élément html cette image de fond pour que cela marche, mais je suis pas très fier du workaround (d'ailleurs si vous pouviez m'éclairer sur ce point : est-ce propre de donner à l'élément html une image de fond ?).

Propre ne veut rien dire. Robuste, ou encore accessible, oui. disons que ce n'est pas optimal quand ça concerne spécifiquement l'élément HTML, mais que ça ne pose pas forcément de problèmes dramatiques.

Jerome Verzier a écrit :

Et d'ailleurs, cela ne fonctionne pas sur mon projet personnel (qui est un document xml traité via xslt pour donner un document html sans doctype, si ça peut aider).

Hum... Je pressens de grandes choses potentielles, là, par ailleurs. Une url ?

Mon projet personnel est visible ici. (Je précise que je touche au xml/xslt que depuis quelques semaines, et que toute inclusion de doctype dans mon xslt entraîne une erreur de parsing. Faut que je trouve comment faire.)
Modifié par Jerome Verzier (15 Mar 2008 - 15:02)

Salut,

Nan nan, ton image y est, fait un test avec une autre image en fond, c'est surement un problème d'encodage des png ?
Pas ça, un problème de rendu des png sous FF, manque de contraste ?

essaye avec celle ci
Modifié par ghost (15 Mar 2008 - 14:05)

Bonjour,

Avec Firefox3 (beta4): l'image de fond est bien affichée, même si on ne l'applique que sur l'élément html ou que sur l'élément body (ai testé les deux via Firebug).

Par contre, effectivement l'image est peu visible, car très peu contrastée. Est-ce le rendu souhaité, ou y a-t-il un problème de ce côté? S'il y a un problème de rendu de l'image PNG, c'est sans doute un problème de correction gamma ou de profil colorimétrique enregistré dans l'image. Il faudrait utiliser un utilitaire tel que PngCrush pour éliminer ces informations qui, de fait, ne sont pas (et ne peuvent pas être) gérées correctement par les navigateurs.

Cette image a été générée par stripegenerator.com, donc c'est fort possible que le script entraîne un souci de ce côté. J'ai fait les tests sur un IBM Thinkpad avec un écran pas terrible je dois avouer, ce qui doit expliquer que je n'arrivais pas à la discerner.

Ceci étant dit, pourquoi pour mon projet client, avec une image exportée par Fireworks CS3 (PNG 8 bits avec channel alpha), sans souci particulier de contraste, l'image ne s'affiche qu'avec l'élément html et non body.

Néanmoins je vous remercie Je crois que je vais devoir aller faire un tour chez l'opticien, et demander à mon père de bazarder ce vieux Thinkpad !

PS: Je viens d'aller tester sur un autre Thinkpad, j'ai du prendre une loupe pour apercevoir l'image. C'est dingue ce que ça manque de contraste :o
Modifié par Jerome Verzier (15 Mar 2008 - 14:34)

Je viens d'effectuer un autre test, avec une couleur de fond blanche et une image noire. Sous Firefox 2 (Windows), l'image ne s'affiche pas (=la page est blanche).

A noter que j'ai bougé la page vers mon serveur personnel (adresse modifiée dans le post au-dessus). Actuellement, la css est ainsi :

body {
	background: #111 url(images/stripes.png);
}

html { }

(Enfin la dernière ligne n'y est pas, c'est juste pour illustrer le fait que j'ai mis l'image sur l'élément body.)

Sur le Thinkpad, cela donne un fond blanc. Même pas gris

Edit: Je viens de mettre à jour ma version de Camino (1.5.2 vers 1.5.5) et le bug se présente désormais, ce qui n'était pas le cas juste avant. Ça doit avoir un rapport avec des modifications apportées à Gecko entre ces deux versions de Camino (faut que je cherche donc les révisions).
Modifié par Jerome Verzier (15 Mar 2008 - 15:18)