CoupdePouce

Mettre un texte sur une image

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.

Angel
In
The
Night

 

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:

Un ange
dans
la nuit

 

.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.

Par Jacky, Jeudi 15 Novembre 2007 à 04:06 GMT+2 dans Astuces CSS (article, RSS)

Vos commentaires

1 Le Samedi 27 Juin 2009 à 18:56 GMT+2, par x-LosAngeles-Music-x

I Love Your Blog &#9829;

2 Le Lundi 29 Juin 2009 à 23:45 GMT+2, par Jacky

Thank You Lady. ;-)

3 Le Lundi 10 Octobre 2011 à 19:43 GMT+2, par bibi03

Bonjour,
Tout d’abord je voudrais vous remercier pour votre site. Enfin une personne qui comprend ce que veut dire mettre du texte sur une image.
J’ai malheureusement un problème.
J’applique vos consignes, mais, cela ne fonctionne pas. Je mets la 1er partie en feuille .CCS et la 2ième en HTML. Ma liaison entre .CC et HTML est :
<link rel="stylesheet" type="text/css" href="./feuille de style.css" media="all" />
J’indique bien l’URL de l’image dans la partie CSS mais quand je visualise, je n’ai que le texte.
J’ouvre dans « FIRFOX » et Je vérifie avec « FIRBUG ». On distingue bien l’emplacement de l’image mais elle ne s’affiche pas.
J’ai vérifié avec « GOOGLE CHROME et INTERNET EXPLORER » il en va de même.
Je ne vois pas ce qui ce passe. Mais je constate que les photos mis sous .CSS ne s’affichent pas dans mon HTML. Par contre les modifications de fonte sont bien prises en compte.
Merci de bien vouloir m’aider à trouver la solution. Ci-dessous la description.
HTML : <div id="bloc-central">
<div class="portraits2"><p>Un&nbsp;ange<br />
dans<br />la&nbsp;nuit</p></div>
.CSS : .portraits2{
background:
url(image005.png);
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;
}

4 Le Vendredi 14 Octobre 2011 à 21:56 GMT+2, par Jacky

Bonsoir bibi03,
Il manque le 2ème <\div.> dans le bloc HTML. Fait un essai.
A+ ;-)

Autres publications sur le sujet

Aucune référence pour le moment.

Vous pouvez faire référence à votre publication en utilisant ce rétrolien

Commenter cet article

*


Pour être sûr... combien font 1 + 3 ? *

Se souvenir de moi


Les champs marqués d'un * sont obligatoires
Votre commentaire sera affiché en texte brut à l'exception des liens