Écrire sur une image, une photo ou un fond en couleur

1.> copier/coller dans la feuille de style, un bloc qui va permettre l'affichage de la zone d'écriture:

.Champignons{
  width: 1050px;
  border: 0px solid #ffff00;
  margin-right: auto;
  margin-left: auto;
  padding: 10px 5px 10px 500px;
  background: #204C19 url("http://adresse de votre image.jpg ou .png")no-repeat;
}

 Vous pouvez ajouter autant de bloc que vous voulez avec des images ou des tailles différentes.
Il faut juste nommer chaque nouveau bloc, par exemple ci-dessus Champignons et Lichens.

2.> Dans la zone de saisie des messages, une fois que vous avez terminé de rédiger votre texte, basculez en mode html et entourer votre texte avec les balises ci-dessous :

<p class="Champignons" style="text-align: justify;">Votre texte ici <p>

Il ne doit pas y avoir de balises ou de <p> </p> entre les balises ci-dessus, sinon ça ne fonctionne pas.
Pour les retours à la ligne, utiliser les <br />.

Fiches descriptives de champignons à utiliser avec
la plus grande prudence, une erreur d'identification
étant toujours possible tant il y a de faux amis.

En cas de doute, abstenez-vous de consommer
votre cueillette et demandez l'avis d'un spécialiste
mycologue ou chez votre pharmacien.

Ci-dessus un exemple de l'effet obtenu

Le texte apparaitra dans un cadre avec une image en fond

Pour modifier le style, la couleur, la grandeur, l'image etc...c'est dans le bloc de la feuille de style ci-dessous.

.Champignons{
  width: 300px;
  border: 0px solid #ffff00;
  margin-right: auto;
  margin-left: auto;
  padding: 50px 5px 20px 40px;
  background: #204C19 url("http://p4.storage.canalblog.com/41/40/125452/44701853.png")no-repeat;
}

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

Pour que l'image ne se répète pas, ajoutez no-repeat à la fin de cette ligne comme indiqué ci-dessous:

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

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

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.

---