CoupdePouce

Pour écrire un texte sur une image, d'habitude on fait appel aux logiciels de traitement que vous connaissez; cette fois-ci, nous allons travailler avec le CSS en jouant avec "margin-left" et "padding" pour déplacer le texte sur l'image.

 

Introduisez les codes ci dessous; pour la 1ère (dimensions réelles:300 x 225px) qui est en portrait,
réduisez la largeur (width) de 1/3 environ (ici 175px). 

.portraits{ background: url(url-image); background-repeat: no-repeat; width:175px; height:225px; margin-left:470px; padding:0px; } .portraits1{margin-left:95px; position:relative; font-size: 18px; font-family: georgia; font-weight: bold; font-style:italic; color: #ffd700; top:0px; padding:10px; }

Puis dans votre article:

<div class="portraits"><div class="portraits1">Angel<br />In<br />
The<br />Night</div></div>

 

Pour l'image en mode paysage:

 

.portraits2{ background: url(url_image); background-repeat : no-repeat; width:300px; height:225px; margin:0px; padding:0px; } .portraits2 p{margin:150px; padding: 25px; position:relative; font-size: 18px; font-family: georgia; font-weight: bold; font-style:italic; color: #ffd700; }

Ensuite dans votre article:

<div class="portraits2"><p>Un&nbsp;ange<br />
dans<br />la&nbsp;nuit</p></div>

Attention! Ecrivez en mode html " &nbsp " pour avoir deux mots sur une ligne.