Texte sur une image centrée

**superted** · 11/05/2010, 10h53

Bonjour à tous,

j'essaye de positionner un texte sur une image et j'y parviens, cependant l'image est centrée sur la page et la position du texte est donc incorrecte suivant la largeur du navigateur et donc de la page. Existe-t-il un moyen de positionner du texte en fonction de la position de l'image?

Pour info voici mon code:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
    <body style="background-color: rgb(196, 233, 243);">
        <div style="text-align: center;">
 
            <img src="img_portail sans txt.jpg" width="1024" height="812"/>
 
            <div class="imgText" style="position: relative; top: -470px; left: 110px; width: 295px;">
                bla bla bla
            </div>
 
        </div>
    </body>

Merci de votre aide

**20cents** · 11/05/2010, 13h25

Tu peux faire un div, et lui définir un background. En lui ajoutant, un center top no-repeat, par exemple.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
<div style="background: url("tonimage.jpg") center top no-repeat;"> Ton texte </div>

**superted** · 11/05/2010, 13h49

Merci pour la réponse, mais comment puis-je positionner le texte à l'endroit de mon choix sur l'image?

**20cents** · 11/05/2010, 14h13

Soit tu utilise un padding (Top - Right - Bottom - Left) à ton div pour positionner le texte ou tu veux.

Soit tu fais un div dans un div. Le premier aurait comme fond ton image, et le deuxième servirait à positionner ton texte sur l'image.

Exemple

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
 
<div style="height:400px; width:360px; background:url(image.jpg) center top no-repeat;">
       <div style="padding-left:200px; padding-top:200px;">
                Le texte que tu veux placer
       </div>
</div>

Le height et le width sont evidemment la taille de ton image. Les padding te servent à positionner ton texte