Image de fond d'un titre en css [Résolu/Fermé]

Signaler
Messages postés
151
Date d'inscription
samedi 30 septembre 2006
Statut
Membre
Dernière intervention
13 janvier 2015
-
Messages postés
151
Date d'inscription
samedi 30 septembre 2006
Statut
Membre
Dernière intervention
13 janvier 2015
-
Bonjour,

je voudrais mettre une image de fond sur un titre h1 en css en fait une puce (ça ... pas de soucis, je vous rassure lol) mais là où ça se corse, c'est que je voudrais que sa hauteur soit plus grande que le titre lui même. Hors quand j'insère une image plus grande, ce qui dépasse du "bloc" h1 n'est pas visible. Alors j'ai essayé un display:block sur le titre (qui ne tente rien n'a rien) mais ça n'a rien changé.

Si quelqu'un avait une idée ...
Merci et bon week end.

4 réponses

Messages postés
688
Date d'inscription
mercredi 16 mai 2007
Statut
Membre
Dernière intervention
5 mai 2010
68
et un padding?
J'ai du mal à imaginer sans ton code lol
Messages postés
437
Date d'inscription
mercredi 29 juillet 2009
Statut
Membre
Dernière intervention
23 septembre 2010
74
Bonjour,

Les balises de titre (h1, h2, ...) sont déjà des balises block. un display:block; ne fera rien sur elles.
Par contre, par défaut, les balises block prennent 100% de l'espace disponible en largeur et se cantonnent à la hauteur du texte en hauteur.
Dans ton cas, la solution serait de modifier les valeurs de marges des titres pour afficher l'image en "puce":
h1 {
margin:0px; /* par défaut les balises de titre ont des margin-top et margin-bottom supérieurs à 0. */
padding:20px; /* On rajoute du padding pour agrandir l'intérieur de la balise, la rendant à une hauteur de plus de 60px (20 de marge en haut et en bas, avec environ 20px pour le texte.)(rajoute aussi 20px de marge intérieure à gauche et à droite de la balise) */
height:60px; /* pour être maître de la hauteur de la balise */
background:url(fond.gif) center left no-repeat;
}
Messages postés
1002
Date d'inscription
vendredi 7 août 2009
Statut
Membre
Dernière intervention
21 mars 2010
187
Et si tu imposais une hauteur à ton élément H1...

Il ne te resterait plus qu'à y mettre un background positionné en bottom center ou top !
Messages postés
151
Date d'inscription
samedi 30 septembre 2006
Statut
Membre
Dernière intervention
13 janvier 2015
1
Ah oui, je n'avais pas pensé à imposé un height au h1.
Donc là j'ai bien mon image il me reste à centrer la typo verticalement ^^.

Merci à vous !

pashmina, le code est à peu près celui de M@dien