ECRIRE SUR UN FOND DANS UN MESSAGE

A la demande de Vanes...

Nous allons voir aujourd'hui comment écrire sur un fond de couleur ou encore sur une image, le sujet à déjà été traité dans ce tuto, mais celui ci est paramétrable via la feuille de style, donc plus simple.

Pour voir plusieurs modèles allez faire un tour sur mon blog cuisine, il y en a un peu partout...

ça se passe en 2 partie...commençons par copier/coller dans la feuille de style, un bloc qui va permettre l'affichage de la zone d'écriture :

.fleur {
  width: 200px;
  border: 1px dashed #910000;
  margin-left: 1em;
  padding: 5px 5px 5px 15px;
  background: #C0C0C0 url("http://adresse de l'image.jpg");
}

Le bloc s'appelle fleur, car vous pouvez ajouter autant de bloc que vous voulez avec des images ou des tailles différentes.
Le nom du bloc changera, papillon par exemple si l'image représente un papillon...

Maintenant pour que la zone apparaisse dans le message, une fois que vous avez terminé de rédiger votre message, vous le passez en mode html <> et vous devez entourer le texte concerné avec ces balises :

<p class="fleur"> </p>

Votre texte doit se trouver entre ses balises, il ne doit surtout pas y avoir de balises <p> ou </p> à l'intérieur, sinon ça ne peut pas marcher !
Pour les retours à la ligne, utiliser les <br> </br>.

Mon texte est dans la zone, il apparait dans un cadre avec une image en fond, plus vous écrivez, plus le cadre s'agrandit, par contre pour la couleur du texte, vous devez sélectionner le texte et choisir la couleur comme pour vos messages habituels, même chose pour mettre le texte en gras.

Voici ce que ça donne dans mon message en mode thml :

<p class="fleur">Mon texte est dans la zone, il apparaitra dans un cadre avec une image en fond !</p>

Pour modifier le style, la couleur, la grandeur, l'image etc...c'est dans le bloc de la feuille de style bien sur...

.fleur {
  width: 200px;
  border: 1px dashed #910000;
  margin-left: 1em;
  padding: 5px 5px 5px 15px;
  background: #C0C0C0 url("http://Adresse de l'image.jpg");
}

Si votre image est petite et que vous mettez un cadre assez grand (width: 200px;) votre image se répètera sur le fond du cadre.

Pour que votre image ne se répète pas, ajoutez no-repeat comme ceci à la fin de cette ligne :

background: #C0C0C0 url("http://Adresse de l'image.jpg") no-repeat;

Vous pouvez harmoniser la couleur du fond en changeant le code couleur #C0C0C0.

Si vous voulez un cadre de la même taille que votre image, comme dans cet exemple...le width qui correspond à la largeur du cadre doit avoir la même taille que l'image.

Comments

[nel]

et oui ma belle, mon blog devient le must des blogs de mémé[Oh]
j'ai mis un joli fond, j'ai fait défiler des petits mots pour les visiteurs.... et je rajoute et je rajoute..c'est un vrai feu d'artifice !!.merci des million de fois
bises[Coeur]
nel[Salut]

[♥ Reo ♥]

Waou !! j'ai bien envie d'essayer pour mettre en valeur mes recettes de cosmetos moi !!! Merci Demolite !!!!

passe une bonne journée [Fleur]