ajouter des motifs dans les messages

[Matthieu A.]

bonjour, je suis sur phpbb3

j'aimerais savoir comment ajouter des motifs dans les messages, comme sur le message d'accueil de ce forum. (une espèce de rectangle aux bords arrondis)



il doit y avoir un code ou un javascript, pour la taille, la couleur, les angles

merci d'avance

[Matriochka]

Bonjour,

Aucun code Javascript, c’est simplement une image qu’on a mis en fond :
https://2img.net/i/fa/optimisation_fdf/fr/puce10.png

Tu peux toi-même créer ta propre image et réaliser quelque chose de similaire avec du HTML

[Matthieu A.]

et comment met on une image en fond d'un message ?

cc

[Matriochka]

Comme ceci :

Code:

<div style="background-image:url("…");">Ton message ici</div>

À la place des points de suspension, mets l’URL de l’image que tu veux voir apparaître en fond.

Pour le reste (positionnement de l’image, répétition…), tu peux regarder ici selon ce qui te plaît :
http://css.mammouthland.net/image-de-fond-background-css.php

[Matthieu A.]

merci mais je n'y arrive pas du tout;

peux tu me mettre juste les codes pour avoir une image en fond sur le message d'accueil, qui ne se répète pas et qui est sur l'index uniquement ?

merci d'avance

cc

[Matriochka]

Si tu veux, mais bon, l’idéal aurait été d’apprendre par toi-même plutôt que d’attendre des codes tout préparés…

Voici ce qu’on pourrait utiliser, si on veut une image à gauche, qui ne se répète pas :

<div style="background-image:url(…);background-position:left;background-repeat:no-repeat;">Ton message ici</div>

Je t’explique quand même le code si ça t’intéresse :
- En rouge, on insère l’image de fond, donc après url( tu mets l’URL de l’image de ton choix.
- En vert, on place l’image de fond à gauche.
- En bleu, on fait en sorte que l’image ne se répète pas.

[Matthieu A.]

merci

j'avais mis ce code (en partie) sur mon message d'accueil mais ca ne marchait pas. J'ai remplacer par ton code mais ca ne marche toujours pas.

Le message s'affiche mais pas l'image

cc

[Matriochka]

Peux-tu m'envoyer ici le code exact que tu utilises ?

[Matthieu A.]

pour l'essai, j'ai pris l'image que tu m'a présentée et un texte simple "essai"

Code:


<div style="background-image:url("http://2img.net/i/fa/optimisation_fdf/fr/puce10.png");background-position:left;background-repeat:no-repeat;">Essai</div>

cc

[Matriochka]

Si tu retires les guillemets autour de l'URL ?

Code:

<div style="background-image:url(http://2img.net/i/fa/optimisation_fdf/fr/puce10.png);background-position:left;background-repeat:no-repeat;">Essai</div>

[Matthieu A.]

l'image apparaît mais sa taille dépend de la taille du texte

Il y a t'il un moyen pour que l'image apparaisse en entier indépendement de la taille du texte

cc

[Matriochka]

Oui, à ce moment il faut ajuster la hauteur :

<div style="background-image:url(https://2img.net/i/fa/optimisation_fdf/fr/puce10.png);background-position:left;background-repeat:no-repeat;height:**px">Essai</div>

height = hauteur

Remplace **px par la hauteur de l'image

[Matthieu A.]

Merci c'est exactement ce que je voulais

tes réponses sont toujours de qualité merci

cc