Position du texte sur une image

Question

Bonjour,

J'ai une image en background en width 100% :

#container  #bg-slide #slide 
{ 
 background:url(images/bg-cloud.png); 
 background-position:50% 100%; 
 height:369px; 
 width:100%; 
 min-width:1200px; 
 margin:0 auto; 
 background-repeat:no-repeat; 
}

Je voudrais sur cette image lui mettre du texte positionné à un certain endroit
Voici le css du texte :

#container  #bg-slide #txt-slide 
{ 
 color:#fff; 
 font-family:Myriad Pro; 
 font-size:16px; 
 text-align:left; 
 width:300px; 
 margin:0; 
 float:left; 
 padding:39px 0 0 238px; 
 border:1px solid red; 
}

et le code HTML :

  <div id="slide"> 
   <div id="txt-slide"> 
     mon texte 
                                 sur plusieurs lignes 
   </div> 
  </div>

Quand je change de résolution mon texte bouge, et ne reste pas à même endroit sur mon image, comment faire pour qu'il reste au même endroit quelque soit la résolution ?

Merci de vos réponses.

mon texte sur plusieurs lignes

Quand je change de résolution mon texte bouge, et ne reste pas à même endroit sur mon image, comment faire pour qu'il reste au même endroit quelque soit la résolution ? Merci de vos réponses. Configuration: Windows 7 / Firefox 13.0

pfdp0 · Answer

Il faut utiliser le positionement css: 

#container  #bg-slide #txt-slide  
{  
 color:#fff;  
 font-family:Myriad Pro;  
 font-size:16px;  
 text-align:left;  
 width:300px;  
position: relative; 
left: 39px; 
 margin:0;  

 border:1px solid red;  
}  

Et tu peux aussi ajouter "top: 5px" par exemple si tu veux qu'il y ai 5 px d'écart avec le haut

AssassinTourist · Answer

Bonjour,

Le background est en % donc il va bouger suivant la résolution. 
Le texte est fixe par rapport à l'image qui elle va bouger, donc le texte va bouger.

Position du texte sur une image

2 réponses

Discussions similaires

Newsletters