Tuto de Kayl n°3 - Mettre une image sur une fiche

Tuto n°3


J'ai dit donc... Pour mettre des images. C'est simple en fait. On en était là :

Code:

<div style="border: 5px double #FF0000; background-color: #CCEEFF; width: 50%; border-radius: 20px;">
<div style="text-align: center; font-size: 26px;"><u>Ici on écrit un titre</u></div>

<div style="text-align: justify; font-size: 14px;">On écrit le texte ici</div>

<div style="text-align: center; font-size: 10px;">Copyright by...</div>
</div>


Maintenant, imaginons qu'on veuille mettre une image en dessous du titre, centrée. Prenons une image quelconque
https://i.servimg.com/u/f39/19/09/25/33/llllll10.jpg

La balise pour qu'on voit l'image est :

Code:

<img src="url de l'image"></img>

Ce qui nous donne:

Et la balise pour centrer, c'est donc

Code:

<center>la chose centrée</center>

Maintenant, où on la place ? C'est simple, on la met entre le titre et le texte, comme ceci :

Code:


<div style="border: 5px double #FF0000; background-color: #CCEEFF; width: 50%; border-radius: 20px;">
<div style="text-align: center; font-size: 26px;"><u>Ici on écrit un titre</u></div>

<center><img src="http://i39.servimg.com/u/f39/19/09/25/33/llllll10.jpg"></img></center>

<div style="text-align: justify; font-size: 14px;">On écrit le texte ici</div>

<div style="text-align: center; font-size: 10px;">Copyright by...</div>
</div>


Voilà :D Après, selon la largeur de votre fiche de RP, vous pouvez mettre l'image que vous voulez ^^

Et maintenant, comment mettre une image en fond ? C'est simple, en fait c'est une information. On écrit, à la place de "background-color:"
"background-image: url(url de l'image de fond)"

Exemple :

Code:

<div style="border: 5px double #FF0000; background-image: url(https://www.sophie-g.net/photo/nature/joux/pct/neige2048.jpg); width: 50%; border-radius: 20px;">
<div style="text-align: center; font-size: 26px;"><u>Ici on écrit un titre</u></div>

<div style="text-align: justify; font-size: 14px;">On écrit le texte ici</div>

<div style="text-align: center; font-size: 10px;">Copyright by...</div>
</div>

L'image se répète lorsque vous écrivez le RP. Si vous voulez pas qu'elle se répète, il faut définir une hauteur et un menu déroulant Ce sera le prochain tuto.
Voilà voilà, si vous avez des questions...