28172 sujets

CSS et mise en forme, CSS3

Deux images de fond incompatibilité IE

Bonjour à tous,

J'ai cherché de partout sur internet sans trouvé de réponse à ma question, c'est pourquoi je viens vous demander de l'aide!

Je voudrais afficher deux background différents sur mon site.
Je m'explique:
- j'ai une image de fond jpg que je définie comme ceci:
html { background: url(fond.jpg) no-repeat; }


- Et une deuxième image png qui a des zones transparentes pour voir le fond.jpg définie comme ceci:
body { background: url(fond.png) no-repeat; }


Vous allez me dire, où est le problème?
-> Ca ne fonctionne pas sous IE alors que ça fonctionne sur firefox/Chrome..
En effet, sous IE seul l'image fond.png est visible.

J'espère avoir été clair et trouvé une réponse !

Merci d'avance
Bonjour,

Quand tu parles d'IE je suppose que tu veux dire IE6. Si c'est bien le cas, alors le comprotement que tu rencontre est "normal". Pas au sens où c'est ce qui derait être, mais dans le sens, c'est tout ce qu'IE6 peut faire. EN effet, IE6 ne sait pas gérer la couche de tranaprence alpha des PNG (il existe des scripts JS qui peuvent l'aider, mais je trouve ces scripts bancals). La seule solution pour accomoder IE6 c'est de substituer l'image PNG par une image GIF (avec transparence sans couche alpha) grace à l'utilisation de commentaires conditionnels (pour appeller une feuille de style corrective dans ton cas).
Je crois qu'il y a aussi le fait que sous IE, le body prend tout l'espace du viewport, alors que sur le reste, il s'agrandit en fonction du contenu ?

Essaye avec le premier fond sur le body, au lieu de l'html, et le fond du body dans un div supplémentaire ?
Juste pour revenir sur les scripts bancals, je tiens à dire que pour avoir essayé la dernière version de iepngfix (conseillé dans les tutos de ce site car c'est le seul moyen de le faire sans mettre des propriétés non standard dans mes css) j'en suis très content. Je l'ai un peu accommodé par rapport à la marche à suivre indiquée et ça marche bien. Le guide propose de mettre des styles intégrés dans le head via un commentaire conditionnel, pourtant si on affiche la source de la page du guide de iepngfix 2.0 alpha 3 on trouve en commentaire une autre méthode visant à déclencher l'utilisation de iepngfix.htc (la clé de voûte de ce script) via du javascript intégré dans le head dans un commentaire conditionnel. J'ai utilisé moi-même cette seconde méthode cachée et bien plus efficace, et je l'ai même poussé plus loin en externalisant le javascript originalement intégré au head.

Et que l'on ne vienne pas me dire que "si le javascript est désactivé blablabla", si y'a encore des idiots pour faire ça, privé de youtube ça devrait les calmer ... Smiley cligne

Bon courage si ça n'avait rien à voir avec la transparence PNG sous IE 6 parce que dans ce cas j'ai pas le niveau pour aider ...
Modifié par vincentjuan (11 Sep 2009 - 13:35)
Merci pour vos réponses.

Alors pour vous répondre:

@Laurie-anne, vincentjuan : Oui IE6 ne supporte pas la transparence des PNG, mais c'est pas ça le problème, je parle bien de IE 7/8..!

@FlorentG : J'avais déjà testé et ça fonctionne comme tu le propose, mais je ne voulais pas rajouter de div à ma page html.. Je voulais donc savoir s'il était possible de faire autrement en css.
vincentjuan a écrit :
Et que l'on ne vienne pas me dire que "si le javascript est désactivé blablabla", si y'a encore des idiots pour faire ça, privé de youtube ça devrait les calmer ... Smiley cligne

Les idiots qui affectionnent youtube savent très bien activer le JS sur les sites qu'ils veulent...


popox > Du coup, j'ai peur que non il n'y ait pas d'autre solution. Serait-il, tout de même, possible de voir une page en ligne histoire de constater le problème et d'avoir accès à l'intégralité du code et aux images ?
Je n'ai pas la possibilité de mettre la page en ligne, mais un test est faisable en 2min


<html>
<head>
<style type="text/css">
html {
	background: transparent url(background_bis.jpg) repeat-y;
}

body  {
	margin: 0;
	background: transparent url(background.png) repeat-x;
	width: 100%;
	min-height: 250px;
}

</style>
</head>
<body>

</body>
</html>
Sujet clos
Aller à