Petit souci avec dégradé fond de message

[Tinker]

Détails techniques

Version du forum : phpBB2
Poste occupé : Administrateur
Navigateur(s) concerné(s) : Mozilla Firefox, Opera
Capture d'écran du problème :

Voir l'image:

Personnes concernées par le problème : Tous les utilisateurs
Problème apparu depuis : Apres installation du dégradé
Lien du forum : http://teslaspaceorigin.forum2ouf.com

Description du problème

Bonjour,

J'ai suivit un tuto à la lettre et le dégradé s'est bien mis en place, mais il ne se met pas sur la totalité du message, donc ça fait plus moche qu'autre chose. ^^

Merci par avance de votre aide.

Le tuto en question

[Erwan Narcos]

C'est parce que le dégradé est une image, donc elle a une taille définie.
Pour que cela fonctionne mieux, change dans ton CSS :

Code:

.bgLeader td.row1 {
    background-position: center bottom;
    background-repeat: repeat-x;
    background: -webkit-linear-gradient(left top, couleur1, couleur2) !important; /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(bottom right, couleur1, couleur2) !important; /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(bottom right, couleur1, couleur2) !important; /* For Firefox 3.6 to 15 */
    background: linear-gradient(to bottom right, couleur1, couleur2) !important; /* Standard syntax (must be last) */
}

[Tinker]

Bonjour,

Merci de ta réponse Erwan.

J'ai changé le code du tuto:

Code:

.bgLeader td.row1 {
background-image: url('http://i19.servimg.com/u/f19/19/20/49/78/degrad12.jpg') !important;
background-position: bottom;
background-repeat: repeat-x;
}
.bgLeader td.row2 {
background-image: url('http://i19.servimg.com/u/f19/19/20/49/78/degrad12.jpg') !important;
background-position: bottom;
background-repeat: repeat-x;
}

Par celui que tu me propose au dessus. Et je n'ai plus le fond du tout, ce qui est normal puisque il n'y a plus l'adresse HTML de l'image. Donc je pense que ce nouveau code est incomplet??

Merci

[Tinker]

Petit up, merci.

[demeter1]

Bonjour,
Le code fourni par erwan n'est pas incomplet. il vous propose tout simplement de passer par des codes couleur pour permettre une transition progressive d'une couleur à l'autre.

Avec des images, vous aurez forcément une coupure entre la première image et la seconde. A moins de travailler la seconde image en y intégrant la transition, la seule autre solution est de passer par des codes couleur.

[Tinker]

Ah ok, merci.

Malgré tout, j'ai mis en place ce code et je n'ai pas de dégradé. Je viens de faire un nouvel essai et idem rien.

Merci de votre aide.

[demeter1]

Vous pouvez fournir le code que vous avez installé.

[Tinker]

Oui, le voici:

Code:

.bgLeader td.row1 {
    background-position: center bottom;
    background-repeat: repeat-x;
    background: -webkit-linear-gradient(left top, couleur1, couleur2) !important; /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(bottom right, couleur1, couleur2) !important; /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(bottom right, couleur1, couleur2) !important; /* For Firefox 3.6 to 15 */
    background: linear-gradient(to bottom right, couleur1, couleur2) !important; /* Standard syntax (must be last) */
}

[demeter1]

Normal qu'il ne fonctionne pas, vous avez oublié de modifier couleur 1 et couleur 2 par le code couleur.

[Tinker]

Je suis super nulle en code, donc si on me le précise pas, ben je fait pas. ^^
Bon alors j'ai encore du foirer un truc, j'ai mis des codes couleurs, mais toujours rien. ^^
Voici le code que j'ai installer:

Code:

.bgLeader td.row1 {
    background-position: center bottom;
    background-repeat: repeat-x;
    background: -webkit-linear-gradient(left top, #abd9ff, #ffffff) !important; /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(bottom right, #abd9ff #ffffff) !important; /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(bottom right, #abd9ff, #ffffff) !important; /* For Firefox 3.6 to 15 */
    background: linear-gradient(to bottom right, #abd9ff, #ffffff) !important; /* Standard syntax (must be last) */
}

Merci pour ton aide demeter.

[demeter1]

Vous pouvez fournir un lien d'un sujet ouvert aux invités sur lequel ce css devrait agir.

Ps : il n'y a pas de nullité juste de l'apprentissage. Il faut bien débuter à un moment ou à un autre.

[Tinker]

Si si je suis nulle, n'ayons pas peur des mots.

Liens vers une page invités

Merci