<div class="class1">
<app-home></app-home>
<router-outlet></router-outlet>
</div><div class="class1">
<app-home></app-home>
<router-outlet></router-outlet>
</div> <!-- This is the home.component.heml -->
.class1{
background-image: url(/Users/md.nuhelnawazchowdhury/Desktop/Shoppie/andalib/src/assets/img/Shoppie1.jpeg);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
I can't get the home page to show the background image. The files above are app.component files.
3 Réponses :
Chemin de YOUT doit être Ouvrir des outils de développement> Réseau onglet et vérifiez si le L'image est téléchargée lorsque l'application est chargée. /assets/img/shoppie1.jpeg
J'ai essayé ça. Maintenant, l'image n'est qu'une barre noire sur le dessus.
Commencez d'abord en mettant vos images à l'intérieur Actifs CODE> Dossier.
Les actifs code> sont automatiquement créés par ACLI angulaire, lorsque vous créez un nouveau projet.
Maintenant, cela dépend de l'endroit où vous voulez utiliser l'image de fond.
Si vous êtes dans l'application Dossier, vous pouvez faire quelque chose comme ceci: background-image: url(../../assets/Shoppie1.jpeg);
Essayez d'utiliser une URL en guillemo unique pour une URL comme indiqué ci-dessous! Mais pour la meilleure pratique du développement d'une application angulaire, je recommanderais de créer un dossier séparé pour les images à l'intérieur d'une Dossier d'actif qui serait la meilleure façon de suivre et de faire une application propre.
L'URL ( et ) ne doit pas être dans les guillemets, seule l'URL réelle.
Je ne suis pas la puissance, juste quelqu'un qui connaît la syntaxe CSS. Maintenant, vous avez des citations doubles autour du tout. Il ne devrait y avoir aucune citation autour de url (...) . Voir Documentation de MDN .
Merci! Je l'ai fait comme URL ('---');
J'ai essayé l'URL dans le "", maintenant c'est juste une barre noire en haut de la page
Mettez-le dans une citation unique non dans une citation double.
L'URL devrait être entre guillemets ne devrait-il pas?
J'ai essayé d'ajouter l'image dans le Home.component.html et j'ai également essayé le Home.comPonent.CSS. Il n'a montré que les "Works Home! Texte.
Le chemin d'image est-il correct?
Votre chemin est en dehors de la barroot, cela ne fonctionnera jamais. Il suffit de commencer par «actifs / .. '
Essayez avec ngstyle!
Est-ce que cela répond à votre question? CSS Débutant, image d'arrière-plan ne s'affichera pas