Image de fond d'un titre en css
Résolu
cricri2394
Messages postés
150
Date d'inscription
Statut
Membre
Dernière intervention
-
cricri2394 Messages postés 150 Date d'inscription Statut Membre Dernière intervention -
cricri2394 Messages postés 150 Date d'inscription Statut Membre Dernière intervention -
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.
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.
A voir également:
- Image de fond d'un titre en css
- Trouver un film sans le titre - Télécharger - Divers TV & Vidéo
- Comment mettre une vidéo en fond d'écran - Guide
- Image iso - Guide
- Enlever le fond d'une image - Guide
- Fond de page word - Guide
4 réponses
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":
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;
}