Superperposer un texte sur une image
Comment positionner un texte sur une image? Deux méthodes simples selon l'effet que l'on veut obtenir, sans utiliser de table.
Le code fonctionne sur tous les navigateurs récents.
Utiliser des calques et CSS
Le texte et l'image sont placés dans deux calques, eux-même internes à un calque conteneur. Cela permet de positionner le texte quelle que soit la position de l'image dans la page.
Ce sont les propriétés de style top et left qui positionnent le texte sur l'image, en fonction des dimmensions de celle-ci.
Le code
<div style="position:relative; height:400px">
<div style="position:absolute;z-index:1">
<img src="images/greenhouse.jpg">
</div>
<div style="position:absolute;top:360px; width:600px; height:400px; z-index:2;font-size:200%">
<center><b>Ma maison...</b></center>
</div>
</div>
Les calques internes ont une position absolue.
La propriété z-index:2 assure que le texte soit au-dessus de l'image.
Créer une image du texte
L'image d'un texte peut être réaliser très rapidemment avec Gimp en quelques étapes.
- Dans le menu Fichier cliquer sur Nouveau. Il faut ouvrir l'option Avancé pour définir le fond comme transparent.
- Sélectionner la couleur et une brosse floue.
- Dessiner le texte avec la brosse.
- Sauver au format GIF (le JPG ne supporte pas la transparence). Le nom du fichier est ici.gif.
Le code
<div style="position:relative; height:430px">
<div style="position:absolute;z-index:1">
<img src="images/cats.jpg">
</div>
<div style="position:absolute;top:150px;left:200px; width:600px; height:430px; z-index:2;font-size:200%;">
<img src="images/ici.gif" width="200" heigth="100">
</div>
</div>L'image ici.gif est positionnée au-dessus de l'image cats.jpg grâce à la propriété z-index. Sa position est déterminée par les propriétés top et left.
Démonstrations
Comment placer un texte sur une image de façon précise avec les propriétés de feuille de style.
Utiliser HTML et des calques
Ou comment placer une image de texte sur une autre.
Voir aussi