image de fond d'un titre en css Résolu/Fermé

Question

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.

pashmina · Answer

et un padding?
J'ai du mal à imaginer sans ton code lol

M@dien · Answer

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;
}

Utilisateur anonyme · Answer

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 !

cricri2394 · Answer

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

Image de fond d'un titre en css

4 réponses

Discussions similaires