Background invisible sous internet explorer

[Gorgorbey]

Bonjour,

Hier soir j'ai commencé à voir ce que donnais mon forum sur les autres navigateurs que Mozilla Firefox. Sous Chrome c'est nickel mais sous IE le background est tous simplement invisible.
C'est un fond d'écran adapté par CSS, voici le code :

Code:

body {
background-image: url(http://i22.servimg.com/u/f22/15/72/69/52/bannia10.png), url(http://img534.imageshack.us/img534/7882/fondy.jpg);
background-position: center top, left top;
background-repeat: no-repeat, repeat;
background-attachment: scroll;
background-size: 100% 325, auto;
}

Une petite idée de la cause de ce problème ?
Mon forum est dans mon profil.

Merci d'avance.

Amicalement.

[SoraNoHime]

Bonjour Gorgorbey,

Je pense que IE doit pas apprécier le suivi de deux images en background.

Essaie en n'en mettant qu'une seule pour voir la différence.

COrdialement.

[Gorgorbey]

Je viens d'essayer avec une seule et cela marche. Y a-t-il moyen de contourner ce problème ?

[SoraNoHime]

En fait, pourquoi as-tu deux images à la suite ?

Le seul moyen que je vois serait de les regrouper visuellement en une seule, sinon le problème sera toujours d'actualité.

[Gorgorbey]

Et bien avant c'était une seule et même image. Le problème est que au chargement du forum (précédent sujet^^) le background mettais longtemps à charger... Du coup on l'a découpé en deux parties :
- la bannière qui s'adapte à la taille de la fenêtre et de l'écran
- le fond gris qui se répète à l'infini

[SoraNoHime]

Et en séparant les deux fonctions. Cela marche-t-il ? Je m'explique, une partie réservée à ton background donc :

Code:

    body {
    background-image: url(http://img534.imageshack.us/img534/7882/fondy.jpg);
    background-position:  left top;
    background-repeat: repeat;
    background-attachment: scroll;
    background-size: auto;
    }

et une autre pour le logo

Code:

    #i_logo {
    background-image: url(http://i22.servimg.com/u/f22/15/72/69/52/bannia10.png);
    background-position: center top;
    background-repeat: no-repeat;
    background-attachment: scroll;
    background-size: 100% 325, auto;
    }

Ps : Si je me suis plantée dans l'intérieur des codes, ou que j'ai mélangé, modifie ^^

[Gorgorbey]

Avant de tester une précision. Je n'ai pas de logo à proprement parler. Mon logo est au niveau du background donc je pense que #i_logo ne marchera pas si ?

Je dois partir je re plus tard.

[SoraNoHime]

Le logo fonctionne même s'il n'y a rien dedans, la class est bien dans le template dont apparait.

A plus tard pour savoir si le test a marcher.

Amicalement.

[Gorgorbey]

J'ai laissé que tu puisses voir.
Le logo n'apparaît pas je pense que ce code ne marche pas :

Code:


#i_logo {
background-image: url(http://i22.servimg.com/u/f22/15/72/69/52/bannia10.png);
background-position: center top;
background-repeat: no-repeat;
background-attachment: scroll;
background-size: 100% 325, auto;
}

[SoraNoHime]

A essayer aussi avec ces balises : i_logo, i_logo img, #i_logo img

Je ne connais pas bien encore cette class, mais elle apparait meme si effectivement l'image n'apparait pas.

[Gorgorbey]

Non toujours pas

[Convivialite]

Hello

dans le css , il faut souvent mettre les tailles

Code:


#i_logo {
background-image: url(http://i22.servimg.com/u/f22/15/72/69/52/bannia10.png);
background-position: center top;
background-repeat: no-repeat;
background-attachment: scroll;
background-size: 100% 325, auto;
width:1920px;
height: 333px;
}

[Gorgorbey]

Oui mais j'aimerai que le logo soit collé en haut et qu'il s'adapte à la taille de l'écran^^

[Convivialite]

Bonjour

une idée :lol!:

comme tu as ta bannière en 1920px
pourquoi tu n'applique pas le tuto de résolution d’écran ?

tu la colle sur le fond gris , comme au départ et il ne te reste plus qu'a redimensionner le tout , se serait beaucoup plus simple

j'ai essayé pas mal de chose et c'est la solution qui m'a parut la meilleure

Amicalement

[Gorgorbey]

Tu veux que je refasse le tuto que j'ai fait au début et que je disais que ça allait pas ?^^

[Convivialite]

je parle de ce tuto

https://forum.forumactif.com/t286701-image-de-fond-changeante-selon-la-resolution-du-visiteur?highlight=couleur+de+fond+de+pub

au départ , tu avais des prob car ton image n'allait pas , elle etait trop petite

https://forum.forumactif.com/t304843-lenteur-de-chargement-du-background#2668529

mais si tu part avec ton logo de 1920px que tu colle sur un fond gris qui ferait
1920px X 1024 px

en redimensionnant tes images
le tuto te donnerait un fond adaptable a tous les écrans

[Gorgorbey]

Code:

var bg= "http://i22.servimg.com/u/f22/15/72/69/52/backgr14.jpg";

if(screen.width < 801) bg="http://i22.servimg.com/u/f22/15/72/69/52/backgr10.png";
else if(screen.width < 1025) bg="http://i22.servimg.com/u/f22/15/72/69/52/backgr15.jpg";
else if(screen.width < 1281) bg="http://i22.servimg.com/u/f22/15/72/69/52/backgr16.jpg";
else if(screen.width < 1601) bg="http://i22.servimg.com/u/f22/15/72/69/52/backgr17.jpg";

document.body.style.backgroundImage="url("+bg+")";

Voilà le code. Et ce n'est toujours pas bon...

[Convivialite]

Hello

qu'est ce que tu trouve qui n'est pas bon ?

voici ce que je vois sur ton forum



en taille réelle


https://i.servimg.com/u/f26/13/66/42/68/143.jpg

[Gorgorbey]

Moi ça donne ça :


De plus il n'y a pas de fond sous IE^^

[Convivialite]

Bizarre ton truc :lol!:

sous IE , j'ai le fond

https://i.servimg.com/u/f26/13/66/42/68/220.jpg

[Gorgorbey]

Il n'y a pas une option sous IE et/ou Firefox pour régler ces soucis ?

[Gorgorbey]

Je voudrais également que le fond ne soit pas fixe et se déroule à l'infini en hauteur quelque soit la longueur du message.

Code:

var bg= "http://i22.servimg.com/u/f22/15/72/69/52/backgr14.jpg";

if(screen.width < 801) bg="http://i22.servimg.com/u/f22/15/72/69/52/backgr10.png";
else if(screen.width < 1025) bg="http://i22.servimg.com/u/f22/15/72/69/52/backgr15.jpg";
else if(screen.width < 1281) bg="http://i22.servimg.com/u/f22/15/72/69/52/backgr16.jpg";
else if(screen.width < 1601) bg="http://i22.servimg.com/u/f22/15/72/69/52/backgr17.jpg";

document.body.style.backgroundImage="url("+bg+")";

[Gorgorbey]

UP

[Convivialite]

J'ai testé plusieurs choses

pas trouvé , désolée

[Gorgorbey]

Tant pis je lock.