Petit problème au niveau du CSS.

[Leck Demonis]

Bonjour,
Voila j'ai un souci, je suis un débutant complet en codage, que ce sois css ou html. J'arrive cela dit à les lires et comprendre a peu près. Mais là ça me dépasse totalement.
J'ai voulu grace au css3 intégrer deux fond. Le premier un dégradé de couleur ce qui ne pose pas de souci. Le deuxième une image qui doit faire toute la longueur du forum (et être complété par le fond) et c'est la que ça coince.
Car je ne sais pas comment m'y prendre.

Voici le code du "gardient" :

Code:

background-image: linear-gradient(bottom, rgb(81,81,98) 28%, rgb(10,10,16) 67%);
background-image: -o-linear-gradient(bottom, rgb(81,81,98) 28%, rgb(10,10,16) 67%);
background-image: -moz-linear-gradient(bottom, rgb(81,81,98) 28%, rgb(10,10,16) 67%);
background-image: -webkit-linear-gradient(bottom, rgb(81,81,98) 28%, rgb(10,10,16) 67%);
background-image: -ms-linear-gradient(bottom, rgb(81,81,98) 28%, rgb(10,10,16) 67%);

background-image: -webkit-gradient(
   linear,
   left bottom,
   left top,
   color-stop(0.28, rgb(81,81,98)),
   color-stop(0.67, rgb(10,10,16))
);

et la le code de l'image

Code:

http://img4.hostingpics.net/pics/260004OnepieceRPGfond.png

J'ai essayer plusieurs "scénario" que j'ai vu sur le net mais aucun ne correspond, sois le souci est encore plus grand, sois ça ne donne pas le résulta que je veux.

[Hiroyuko]

Bonjour,

Je suis sur mon iPhone, je n'arriverai pas a te donner le code mais je t'explique tout de même.

Dans ton CSS, ne mets pas la propriété "background-image" mais juste "background". Ensuite, après les deux points, mets ton image, suivi d'une virgule et de ton dégradé puis ferme ta commande. Ça a fonctionné chez moi.
Bien sûr tu dois le faire pour chaque navigateur, comme dans ton code actuel.

Edit : Source

Hiroyuko

[Leck Demonis]

Code:

body {
  background-attachment:scroll;
        background: http://img4.hostingpics.net/pics/260004OnepieceRPGfond.png,linear-gradient(bottom, rgb(81,81,98) 28%, rgb(10,10,16) 67%);
        background: -o-linear-gradient(bottom, rgb(81,81,98) 28%, rgb(10,10,16) 67%);
        background: -moz-linear-gradient(bottom, rgb(81,81,98) 28%, rgb(10,10,16) 67%);
        background: -webkit-linear-gradient(bottom, rgb(81,81,98) 28%, rgb(10,10,16) 67%);
        background: -ms-linear-gradient(bottom, rgb(81,81,98) 28%, rgb(10,10,16) 67%);
       
        background-image: -webkit-gradient(
          linear,
          left bottom,
          left top,
          color-stop(0.28, rgb(81,81,98)),
          color-stop(0.67, rgb(10,10,16))
        );
}

J'ai suivi ta description et j'ai compris ça. Mais sa ne donne absolument rien (un fond blanc sans image comme si aucun code n'était la).

j'ai également essayer une version background-image (au cas ou) et toujours un fond blanc sans image, sans dégradé. (mon fond de base n'a pas de couleur.)

Je tien à préciser que je n'ai rien touché aux templates du forum ainsi qu'au code css mise à part ce code.

[Hiroyuko]

En fait tu te trompes pour l'image, il faut écrire comme ceci :

Code:

body{
background:url(http://img4.hostingpics.net/pics/260004OnepieceRPGfond.png), linear-gradient(bottom, rgb(81,81,98) 28%, rgb(10,10,16) 67%);
background:url(http://img4.hostingpics.net/pics/260004OnepieceRPGfond.png), -o-linear-gradient(bottom, rgb(81,81,98) 28%, rgb(10,10,16) 67%);
background:url(http://img4.hostingpics.net/pics/260004OnepieceRPGfond.png), -moz-linear-gradient(bottom, rgb(81,81,98) 28%, rgb(10,10,16) 67%);
background:url(http://img4.hostingpics.net/pics/260004OnepieceRPGfond.png), -webkit-linear-gradient(bottom, rgb(81,81,98) 28%, rgb(10,10,16) 67%);
background:url(http://img4.hostingpics.net/pics/260004OnepieceRPGfond.png), -ms-linear-gradient(bottom, rgb(81,81,98) 28%, rgb(10,10,16) 67%);
}

Pour l'image il faut mettre "url()".

Hiroyuko

[Leck Demonis]

ça ne fonctionne toujours pas. Et sa l’élargie le forum. (le fond du forum est toujours blanc.)

Je sais pas si ça aide mais je suis en PhpBB3. (et sa me dérange pas de changé étant donner que je n'ai pas de design mit en place pour le moment)

PS : D'ailleurs autre problème, je sais pas si c'est lié, mais quand j'actualise la page tout bug rien n'est plus a sa place c'est laid etc. il faut que j'actualise 2 ou 3 fois pour retrouvé le design de base du forum (donc l'actuel).

[Hiroyuko]

Je pense que j'ai dû oublier les ", donc entoure tes images par des guillemets.

Code:

url("lien_image")

Dis-moi quoi

Hiroyuko

[Leck Demonis]

Fond de forum blanc...
Voici le lien : http://onepiecerpg.creer-forum.com/
Comment ça tu pourras constaté que rien ne ce fait :s.

[Hiroyuko]

Je te croyais sans problème quand tu me le disais.

Sur mon forum, mon code gradient fonctionne sur les catégories. Par contre j'ai testé ton code sur mon forum test et effectivement ça ne marche pas.
Je me demande s'il est applicable sur le body, même si ça me parait bizarre que ça n'aille pas. Je vais faire des tests et je te tiens au courant.

Hiroyuko

[Leck Demonis]

Merci beaucoup pour ton aide [même si elle n’aboutit pas à une solution par la suite].

[Hiroyuko]

Alors je voulais te dire que j'ai essayé mon code avec ton image sur mon forum "principal" et ça marche niquel (juste que j'ai gardé mes couleurs). J'ai copié et collé ce code sur mon forum test et là... il ne s'est rien passé, ça n'a pas marché. Donc je ne comprends pas pourquoi sur l'un de mes forums ça fonctionne et pas sur l'autre.

Je continue à chercher et te tiens au courant, mais si quelqu'un a une idée...

EDIT : Dis-moi, dans l'option "optimiser votre CSS", tu as coché "non"? apparemment ce serait ça qui poserait problème, mais je n'en suis pas certain à 100%

Hiroyuko

[Leck Demonis]

En retirant "optimiser votre CSS" l'image apparait, mais elle ce duplique (mosaique), n'est pas centrer et ce répète.

Avec le code, je place comment et où le code suivant ?

Code:

background-position: center;
background-attachment: scroll;
background-repeat: no-repeat;

[Hiroyuko]

En fait, il te suffit d'écrire ces choses après ton image. C'est-à-dire;

Code:

url(IMAGE) no-repeat center scroll

Normalement ça devrait bien te le faire

Hiroyuko

[Leck Demonis]

Code:


body{
  background: url("http://img4.hostingpics.net/pics/260004OnepieceRPGfond.png") no-repeat, center, scroll;
        background:url("http://img4.hostingpics.net/pics/260004OnepieceRPGfond.png"), linear-gradient(bottom, rgb(81,81,98) 28%, rgb(10,10,16) 67%);
        background:url("http://img4.hostingpics.net/pics/260004OnepieceRPGfond.png"), -o-linear-gradient(bottom, rgb(81,81,98) 28%, rgb(10,10,16) 67%);
        background:url("http://img4.hostingpics.net/pics/260004OnepieceRPGfond.png"), -moz-linear-gradient(bottom, rgb(81,81,98) 28%, rgb(10,10,16) 67%);
        background:url("http://img4.hostingpics.net/pics/260004OnepieceRPGfond.png"), -webkit-linear-gradient(bottom, rgb(81,81,98) 28%, rgb(10,10,16) 67%);
        background:url("http://img4.hostingpics.net/pics/260004OnepieceRPGfond.png"), -ms-linear-gradient(bottom, rgb(81,81,98) 28%, rgb(10,10,16) 67%);
        }

Voila ce que j'ai mit et sur mon forum tu as le résulta. (t’inquiète pas, je modifierait pas sans que tu es vu)

[Hiroyuko]

Essaye ça :

Code:

  background: url("http://img4.hostingpics.net/pics/260004OnepieceRPGfond.png") no-repeat center fixed;
        background:url("http://img4.hostingpics.net/pics/260004OnepieceRPGfond.png") no-repeat center fixed, linear-gradient(bottom, rgb(81,81,98) 28%, rgb(10,10,16) 67%);
        background:url("http://img4.hostingpics.net/pics/260004OnepieceRPGfond.png") no-repeat center fixed, -o-linear-gradient(bottom, rgb(81,81,98) 28%, rgb(10,10,16) 67%);
        background:url("http://img4.hostingpics.net/pics/260004OnepieceRPGfond.png") no-repeat center fixed, -moz-linear-gradient(bottom, rgb(81,81,98) 28%, rgb(10,10,16) 67%);
        background:url("http://img4.hostingpics.net/pics/260004OnepieceRPGfond.png") no-repeat center fixed, -webkit-linear-gradient(bottom, rgb(81,81,98) 28%, rgb(10,10,16) 67%);
        background:url("http://img4.hostingpics.net/pics/260004OnepieceRPGfond.png") no-repeat center fixed, -ms-linear-gradient(bottom, rgb(81,81,98) 28%, rgb(10,10,16) 67%);

Tu dois mettre les attributs après chaque image (j'ai corrigé). Et je t'ai fixé le fond, sinon tu perds le bas. Sinon tu mets "scroll" à la place de "fixed".

Hiroyuko

[Leck Demonis]

Yeh ! ça avance, mais le résulta est pas top top XD.
Je viens de comprendre que je doit ajouté cette image"https://2img.net/r/hpimg15/pics/210530suitefond.png" en repeat-y a la suite de celle que j'ai deja. Et que je doit ajouté la couleur #515162 après mon dégradé pour que ça face "jolie". Malheureusement la aussi jsuis bloqué (tu as saisi que j'avais que des notions a comprendre le codage et non pas a le bidouillé ^^").

[Hiroyuko]

Le problème c'est que tu ne peux pas (à ma connaissance) mettre autant d'images et de dégradés. Tu peux au maximum faire une image + un dégradé, ou deux dégradés différents (je ne sais pas si on sait commencer à une distance donnée...) mais deux images appliquée sur le body, c'est pas possible me semble-t-il.

Par contre, au lieu de te casser la tête concernant les deux dégradés, enlève le dégradé de ton image (donc les deux côtés) et tu gardes le code du dégradé. Je pense que tu auras déjà un meilleur effet.

Par contre, le problème c'est pour le bas de l'image qui ne sera pas à la taille de tous les écrans (si ton image est trop petite par exemple...)

Essaye la première idée (modifier ton image) pour le dégradé. Et dis-moi ce que ça donné

[Leck Demonis]

Au niveau de l'image elle même sa rend mieux. Merci du conseil. Mais pour le reste maintenant c'est compliquer.
En gros je veux avoir un résulta égale a cette image : https://2img.net/r/hpimg15/pics/596101fondgant.png
Mais en codage sur mon forum. j'ai déjà vu sur un autre forum que c'était possible comme effet.

[Hiroyuko]

Pourrais-tu me montrer le forum en question par MP que j'aille voir?

Car il se pourrait que l'image soit en fait mise en bannière, avec une image de fond répétée sur le body non?

Pour ma part, j'ai un fond blanc en allant sur ton forum, en dessous de ton image (alors que sur mon test c'était nickel). As-tu ajouté/modifié du code que je t'ai donné?

Sinon ajoute ceci au code que je t'ai donné pour essayer :

Code:

background-image:url(image_à_répéter) repeat-y center;

J'ai testé chez moi, ça a l'air de fonctionner...

EDIT : En fait non, c'est juste ton image de base qui est très haute ^^
Je vais rentrer chez moi là, j'essaye de revenir t'aider quand j'y suis
Et je crois avoir la solution ^^ Je viens de repenser à un autre des forums que j'ai fait, je verrai dès que je rentre pour te passer le code

Hiroyuko

[Leck Demonis]

J'ai ajouté ce que tu m'as dit ça ne fonctionne pas.
Sinon oui j'avais ajouté des truck, mais je les aient supprimé (tu peux voir le résulta sur mon forum avec ton codage sans modification.)

Le MP avec le lien du forum va être envoyer dans quelque instant.

Edite : Ok c'est noté, merci de ton aide . je patiente.

[Hiroyuko]

Me revoilà. Merci pour le lien.



Hiroyuko

[Leck Demonis]

Dernier poste pour remercier Hiroyuko pour ses bons conseils.

[Hiroyuko]

Pas de problème.

Bonne soirée,

Hiroyuko