28172 sujets

CSS et mise en forme, CSS3

Insertion image devant balise <h1>

bonjour, j'aimerais savoir quelle propriété mettre a une balise de titre type <h1> pour faire précéder le texte d'une petite image?
merci de votre aide

h1 {
    background-mage: url('adresse-de-l-image') no-repeat;
    padding-left: **px;           /* largeur de l'image + un peu de rab */
                                  /*pour que le texte ne colle pas à l'image */
}
Merci beaucoup c'est ce que j'avais fait et ca marche très bien- mais je pensais initialement a qq chose avec une puce

j'ai mis le padding en % mais le comportement en responsive est pas bon - je vais remettre des pixels!
Hello,

Avec un padding-left tu as l'espace entre le bord de ton conteneur et le h1 non ? Si oui dans ce cas il n'y a pas d'espace entre le texte et l'image.

La solution de Zelalsan est d'utilisé la règle before de ton h1


h1:before{
    content : url('adresse-de-l-image');
    padding-right: 2vw; 
}


Si tu veux que se soit responsive, tu peux utiliser l'unité de mesure "vw" qui est une unité relatives à la surface d’affichage. Par contre, cette unité est assez récente les anciens navigateurs ne la supporte pas.

A+ Smiley smile
Juste pour préciser que si tu passes par "::before", tu n'as pas besoin de spécifier de "padding". Tu ne sors pas l'élément du flux et l'espace sera égal à la taille de l'image que tu insères.
Sujet clos
Aller à