J'ai vu un autre sujet sur mon problème, mais cela ne le résout pas, j'essaie de mettre une image d'arrière-plan pour mon portefeuille, mais cela ne fonctionne pas. Je ne comprends pas pourquoi, avez-vous une idée?
My Code: P>
HTML: P>
css:
.main{
background-image: url(../img/dev-dots.png);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.navbar{
height: 10vh;
background-color: purple;
position: fixed;
}
5 Réponses :
<div class="main">
<div class="navbar container-fluid d-flex justify-content-center">
<i class="fab fa-react fa-3x firstIcon mr-4"> <span class="txtIcon"> Project</span></i>
<i class="fas fa-check-square fa-3x mx-4"> <span class="txtIcon2"> Skills</span></i>
<i class="fas fa-id-card fa-3x ml-4"> <span class="txtIcon3"> Contact</span></i>
</div>
</div>Votre élément div avec la classe 'Main' n'a pas de hauteur. L'image de fond ne montrera pas à cause de cela.
Vous pouvez faire l'une de ces options: p>
Donnez-lui une hauteur fixe (non recommandée) p>
.navbar {
display: block
}
<div class="main">
<div class="navbar container-fluid d-flex justify-content-center">
<i class="fab fa-react fa-3x firstIcon mr-4"> <span class="txtIcon"> Project</span></i>
<i class="fas fa-check-square fa-3x mx-4"> <span class="txtIcon2"> Skills</span></i>
<i class="fas fa-id-card fa-3x ml-4"> <span class="txtIcon3"> Contact</span></i>
</div>
</div>Vous fournissez le mauvais chemin. Essayez ceci
p>
<!DOCTYPE HTML>
<html>
<head>
<style>
.main{
background-image: url(http://www.cagbd.org/assets/upload/logo/1124d2b92e3b8f44b1c8f21cfebc6dae.jpg);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.navbar{
height: 10vh;
}
</style>
</head>
<body>
<div class="main">
<div class="navbar container-fluid d-flex justify-content-center">
<i class="fab fa-react fa-3x firstIcon mr-4"> <span class="txtIcon"> Project</span></i>
<i class="fas fa-check-square fa-3x mx-4"> <span class="txtIcon2"> Skills</span></i>
<i class="fas fa-id-card fa-3x ml-4"> <span class="txtIcon3"> Contact</span></i>
</div>
</div>
</body>
</html>.main {
background-image: url(../img/dev-dots.png);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
width: 200px;
height: 100px;
}
Même si cela fournit une réponse au problème de l'OP, cela ne sera pas considéré comme une réponse sans une bonne explication, et sera considéré comme un poste de faible qualité, qui sera probablement supprimé après un certain temps. Alors, veuillez ajouter une explication avec le code.
EDIT: Il y a une erreur dans mon code:
Je pense que votre problème est votre trajectoire relatif de l'URL d'image de la classe CSS. Peut-être publier votre fichier de projet pour vérifier.
Si ceci est votre index.html essayer
url ("img / dev-dots.png")Le code semble correct, vérifiez si vous obtenez une erreur dans la console de votre navigateur, vous pouvez utiliser le mauvais chemin dans le
arrière-plan-imageVous utilisez une sorte de cadre / bibliothèque CSS et vous devez étiqueter cela.