image provenant de l'accueil du blog

Bienvenue sur le premier tutoriel du blog concernant la partie " HTML & CSS " ! avant tout je préfère rappeler que le codage n'est pas mon métier, c'est en bidouillant par ci par la que j'ai pu découvrir certains codes et grâce a des eklablogueur.ses telle que Nagalia ou encore PAPASTI !

vous avez sans doute vu parfois sur certains blog des images en accueil ou autre où il y a du texte écrit dessus mais pas en image (.jpg,.png...) ! eh bien tout ça c'est possible grâce à l'HTML et un peu de CSS !

Si vous souhaitez apprendre un peu plus sur le codage, je vous envoie vers les personnes citées plus haut et bien d'autres comme Fabule, lockpine, elinae...

Passons au tutoriel.

Il va se découper en deux parties, la première consistera à s'occuper de votre code CSS non défini, il ressemblera a quelque chose de ce style :

.imgbloc* {
/* le bloc qui contiendra l'image */
}

.textbloc* {
/* Le bloc contenant le texte !*/
}

* vous pouvez changer les noms, mettre ce que vous voulez tant que vous arrivez a bien différencier les deux bloc !

dans un second temps, vous allez préparer votre HTML comme ceci :

<div class="imgbloc">
<img src= "url de l'image" alt="abc" />

<div class="textbloc">Bla bla bla</div>
</div>

Après avoir préparé vos codes, trouver une image ou faite votre création !

concernant la partie css rien de compliqué pour les valeurs 

.imgbloc { 
position : relative; }

.textbloc {
position : absolute;
top : xpx;
left : xpx; }

Pour insérer du texte dans votre image il faudra impérativement mettre la positon relative au bloc contenant l'image et absolue pour le texte, pourquoi ? pour faire "simple" relative est l'élément qui reste fixe, il ne bougera pas a contrario du texte que l'on va devoir donner des valeurs pour le placer sur l'image !

 pour exemple, sur l'image que vous voyez plus haut, en top j'ai mis 800px et en left 675px !

Pour la partie HTML il vous suffit simplement de remplacer ('URL de l'image') par celle choisie et le texte que vous souhaitez insérer !