Comment mettre une image derrière le texte en CSS?
Je veux une image à afficher derrière du texte dans un <h1>
tag. Mais quand j'ajoute l'image remplace le texte et pousse le texte en dessous.
Captures d'écran : Avant et Après
CSS
body {
background-color: #1a1a1a;
}
header,
h1 {
text-align: center;
font-family: CGF Locust Resistance;
font-size: 50px;
color: lightgray;
-webkit-text-stroke: 1.5px #000;
}
header {
margin: 0;
padding: 0;
height: 100px;
border-bottom: .5px solid #b3b3b3;
}
nav {
position: relative;
top: -5px;
margin: auto;
padding: 0;
list-style: none;
width: 100%;
text-align: center;
border-bottom: .5px solid #b3b3b3;
}
nav ul li {
display: inline;
color: #fff;
font-family: CGF Locust Resistance;
font-size: 12.5px;
padding: 20px;
}
.red {
color: red;
}
#omen {
z-index: -1;
}
- Pourriez-vous nous fournir le code html ainsi?
Vous devez vous connecter pour publier un commentaire.
Définir l'image comme fond d'image d'en-tête. Est-ce que vous êtes après?
Cela devrait faire l'affaire, mais il est préférable d'utiliser des id au lieu de changeing les h des tags un peu partout sur votre côté
Mettez ce paramètre à l'objet image dans le css (exemple la création de classes personnalisées) :
Et celui-ci pour le texte :
Bien sûr, il faut pour cela définir des classes à ses objets respectifs. Espérons que cela aide !
C'est environ combien vous devez utiliser une image d'arrière-plan dans cette situation.
center 100px
signifie centrée horizontalement et 100px de haut (par rapport à lah1
élément).