Text-align et background-image

Bonjour,

Voila j'ai un soucis, ça me parait tout bête mais je bloque.
j'ai un titre h1 qui est centrer (text-align:center) et je veux lui appliquer une petite image de fond

text-align: center;
background-image: url('img/ico_feuille.jpg');
background-position:top left;
background-repeat:no-repeat;

Et là cette image se cale tout à gauche de la page, comme ci le titre était en width:100%, alors que je veux qu'il se mette à coté de la première lettre du titre.

Je ne vois pas mon erreur, quelqu'un à une idée.

Merci.

Bonjour !

seb47327 a écrit :
Et là cette image se cale tout à gauche de la page, comme ci le titre était en width:100%, [...] Je ne vois pas mon erreur

Pas d’erreur c'est le comportement normal des balises hX (type "block"), à l'image du comportement naturel d'une div par exemple.
Modifié par _laurent (09 Oct 2012 - 11:48)

Tu peux changer le background-position pour top center, par exemple..

Ten a écrit :
Tu peux changer le background-position pour top center, par exemple..

Ca ne placera pas l'image à côté de la première lettre du titre.

Il y a deux solutions pour faire ce que tu souhaites seb :
1. Placer l'image dans le code HTML avant le titre
2. Rajouter un élément span entourant le titre et placer l'image dans ce span.

Personnellement, je recommande la première solution, qui évitera de rajouter un élément HTML.

Bonjour,

H1:before {
       content:url('img/ico_feuille.jpg');
       padding-right:Xpx; (si besoin)
 }

C'est bien aussi, si l'on a pas besoin de supporter IE<8, non ?

Super, merci pour vos réponses.

Laurie-Anne, je vais prendre la solution 2, car mon image doit-être au dessus de la première lettre, et je pense que cela me laisse plus de latitude pour gérer la position.

Voila ce que j'ai fait, ça fonctionne visuellement, est-ce que cela vous semble correct ?

span img{position:absolute;top:-34px;right:-60px;width:63px;height:43px;}
h1 span{position: relative;}

<h1><span>Inscription<img src="image/ico_feuille2.jpg"/></span></h1>

Modifié par seb47327 (09 Oct 2012 - 14:23)