[RESOLU]Background-image , écriture raccoucie et dysfonctionnements

Hello,

J'aimerai vos avis sur un point :

En chargeant la déclaration background-image comme ça :

.fond {background: white url(./images/toto.jpg) top left no-repeat}

souvent sur Firefox, l'image de fond n'apparait pas, principalement à cause du no-repeat j'ai l'impression, mais des fois à cause du reste aussi...ce qui pose problème à l'air d'être les déclarations se trouvant après les parenthèses car il m'est arrivé d'avoir le validateur css qui me dit qu'il y a trop de déclarations.

Ce qui m'amène maintenant à écrire comme ça :

.fond {
background: url(./images/toto.jpg) ;
background-position: top left;
background-repeat: no-repeat;
background-color: white;
}

Quelle tartine ! devoir écrire tout ça plusieurs fois dans une feuille ça prend de la place (visuellement)...
Un truc m'échappe ? je fais quelque chose de travers ?

Quelqu'un à une info ?

et vous ? comment vous faites ?

Merci.
Modifié par Hum (25 Nov 2006 - 16:14)

Salut,

J'ai déja eu ce genre de désagrément moi aussi. Ormis le fait que l'adresse peut parfois ne pas être bonne, souvent la position de la déclaration de couleur de fond par rapport à l'image posait problème.

Ainsi maintenant j'ai tendance à déclarer ainsi :

X {
background: url(./images/toto.jpg) top left no-repeat
background-color: white;
}

En séparant les deux et en mettant la couleur après ca marchait. Alors que normalement on est censé déclarer la couleur avant l'image... Va savoir pourquoi.

Déja je suis pas tout seul,
seulement c'est curieux moi c'est plutôt avec le repeat et le positionnement du background que j'ai des problèmes.

Merci de ton retour Mikachu.

Salut,

euh... moi, je fais :

.fond {background: white url(./images/toto.jpg) left top no-repeat}

et pas "top left".

koala64 a écrit :
et pas "top left".

Surtout si on utilise des valeurs numériques plutôt que ces mots-clef, mieux vaut respecter l'ordre.

a écrit :
koala64 a écrit :
et pas "top left". ravi

Surtout si on utilise des valeurs numériques plutôt que ces mots-clef, mieux vaut respecter l'ordre. cligne
D'ailleurs j'ai découvert l'autre jour à mon grand regret qu'il était impossible d'avoir une valeur numérique et une valeur nommée, du genre

{url(img) no-repeat center 20px}

Donc centrer un background et lui donner une marge par rapport au haut de la fenètre est pas possible. Je trouve ca super dommage

Mikachu a écrit :
Donc centrer un background et lui donner une marge par rapport au haut de la fenètre est pas possible. Je trouve ca super dommage

Si bien sûr que c'est possible... Tu peux le faire ainsi :

body { background: white url(image.png) 50% 100px no-repeat; color: black; }

mais encore une fois, l'ordre des déclarations est important.

PS: Avec center à la place de 50%, ça marche aussi mais on a une erreur CSS... Je n'ai pas tilté pourquoi...

sauf que center et 50% ca donne pas la même chose... 50% ca fait démarrer le background à 50% du bord, alors que center il se positionne avec la même marge de chaque coté.

Si si... encore une fois...

Ok pour le top left, j'essaie.

Merci à vous tous !

Salut,

koala64 a écrit :
PS: Avec center à la place de 50%, ça marche aussi mais on a une erreur CSS... Je n'ai pas tilté pourquoi...

En fait, les spécifications ne permettent pas de mélanger les valeurs numériques et les mots-clés.

Hello,

ouep... C'est bizarre vu qu'on peut associer % et px, par exemple... Je ne vois pas en quoi ça les dérangeait mais bon... soit !

koala64 a écrit :
Hello,

ouep... C'est bizarre vu qu'on peut associer % et px, par exemple... Je ne vois pas en quoi ça les dérangeait mais bon... soit !

Oui, c'est en effet étrange.

Je met un RESOLU, j'ai tester cette semaine et le problème avait bien l'air d'être ça :

Je mettais left top au lieu de top left après le chemin de l'image entre parenthèses.

Hum a écrit :
Je met un RESOLU, j'ai tester cette semaine et le problème avait bien l'air d'être ça :

Je mettais left top au lieu de top left après le chemin de l'image entre parenthèses.

Le validateur CSS signale pourtant cette erreur, non ?

Ben non, je viens de re-retester....

Hum a écrit :
Ben non, je viens de re-retester....

Ah oui, au temps pour moi. C'est bizarre.