How to set the background image with Angular? - html

Question

<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.

Answer 1

First start by putting your images inside assets folder.
Assets folder is automatically created by Angular CLI, when you create a new project.
Now it depends on where you wanna use the background image.
If you are in app folder you can do somthing like this:
background-image: url(../assets/Shoppie1.jpeg);
if you are deeper, say you created a component in its own folder, you will have to do something like:
background-image: url(../../assets/Shoppie1.jpeg);
I created this github demo if you wanna see how it is done: link

Answer 2

Yout path should be /assets/img/Shoppie1.jpeg
background-image: url("/assets/img/Shoppie1.jpeg")
Open Developer tools > Network tab and check if the image is getting downloaded while the app is loaded.

Answer 3

Try using a url in single quotation for a url as shown below!
<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.html -->
.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;
}
But for the best practice of developing an angular app I would recommend to create a separate folder for images inside an asset folder that would be the best way to track and make an application clean.