Position du texte sur une image
Melooo
Messages postés
1405
Date d'inscription
Statut
Membre
Dernière intervention
-
AssassinTourist Messages postés 6029 Date d'inscription Statut Contributeur Dernière intervention -
AssassinTourist Messages postés 6029 Date d'inscription Statut Contributeur Dernière intervention -
Bonjour,
J'ai une image en background en width 100% :
Je voudrais sur cette image lui mettre du texte positionné à un certain endroit
Voici le css du texte :
et le code HTML :
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.
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.
A voir également:
- Position du texte sur une image
- Extraire texte d'une image - Guide
- Ma position - Guide
- Insérer une image dans word sans bouger le texte - Guide
- Image iso - Guide
- Légender une image - Guide
2 réponses
Il faut utiliser le positionement css:
Et tu peux aussi ajouter "top: 5px" par exemple si tu veux qu'il y ai 5 px d'écart avec le haut
#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
#container #bg-slide #txt-slide { color:#fff; font-family:Myriad Pro; font-size:16px; text-align:left; width:300px; position: relative; left:240px; top:150px; margin:0; }body{ margin: auto;}