Background-image et Internet Explorer [Résolu]

[Juju54350]

Bonjour,


Je travaille en ce moment sur une page web sur laquelle existent plusieurs div qui contiennent une image en arrière-plan (toutes les images sont des .gif). Mais le problème est que ces images ne s'affichent pas sur Internet Explorer.
Existe-t-il une méthode en CSS pour contrer ça ou faut-il passer par du Javascript ?

Merci d'avance de votre aide.

[Bisûnûrs]

Normalement y a pas de raison, comme dirait l'autre. Donc sans code ou mieux, un exemple en ligne, on ne pourra pas t'aider.

[Juju54350]

Ok, voici un exemple :

Code :

1
2
 
<div class="test"></div>

Code :

1
2
3
4
5
6
7
 
.test
{
    background-image: url('url');
    background-repeat: no-repeat;
    background-position: 5px 5px;
}

Et même en actualisant la page sur IE, je peux voir que les images s'affichent pendant un petit laps de temps et disparaissent quand la page est complètement chargée.

[Bovino]

Si ta div est vide et que tu ne lui donnes pas de dimensions, elle n'occupe pas assez d'espace (et en particulier en hauteur) pour pouvoir voir l'image de fond...

[Juju54350]

Non mais il y a quelque chose dans mon div, je lui définis même dans la classe une hauteur et une largeur. Je vous montre juste les propriétés CSS concernant l'image en arrière-plan. Maintenant je ne vois pas ce qui pourrait clocher vu que ça marche parfaitement sur Firefox.

[Bisûnûrs]

Oui, enfin là tu ne nous donnes que du code qui utilisé comme tel fonctionne dans tous les cas et sur tous les navigateurs.

Ce qu'on aimerait avoir c'est un exemple réel, de l'image dans son contexte, contexte qui semblerait faire "bugger" tes images sous IE.

[Juju54350]

Ok, voilà un div qui possède une image en background :

Code :

1
2
3
4
5
6
7
8
9
10
11
 
<div id="frame2" class="payments">
<asp:Label ID="LblTotalGain" runat="server">Solde actuel :</asp:Label>
<img src="~/App_Themes/Tns/MyPanel/Images/help_icon.png"
                style="float: right;" />
<asp:Label ID="LblValueTotalGain" runat="server"></asp:Label><br />
<br />
<br />
<font color="#003367">Cliquez
<asp:LinkButton ID="LKPayments" runat="server" OnClick="LKPayments_Click"><%= ResHelper.LocalizeString("ici") %></asp:LinkButton> pour verser votre argent sur un compte de votre choix</font>
</div>

Et la classe CSS appropriée :

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
.payments
{
    padding: 15px;
    background-color: #F5F5F5;
    height: 170px;
    width: 200px;
    float: right;
    text-align: center;
    margin-right: 25px;
    margin-top: 100px;
    background-image: url('/cms/App_Themes/Tns/MyPanel/Images/payments_icon.gif');
    background-repeat: no-repeat;
    background-position: 10px 10px;
}

[Bisûnûrs]

Le "réel" sous-entendait qu'on risquait d'avoir besoin de l'image en question aussi. D'où le fait qu'un exemple (simplifié) en ligne représentant ton problème ne serait pas superflu.

[Juju54350]

Voilà l'image : http://www.glob-infobourse.com/images/caddie.gif

Est-ce le format .gif qui pose problème ?

[Bisûnûrs]

Ni plus ni moins que le JPG ou le PNG. Et je viens d'essayer avec ton image, ça fonctionne très bien ..

[Juju54350]

Ok, bah je ne sais pas alors, j'ai changé le background-image par une balise img normale, au moins, je suis sûr que ça fonctionne.