为Angular项目设置完整背景

Question

I tried many times and searched a lot about how to set image background for whole app in angular project.

I tried global css and app.component.css but it just set background for component area.

Here is my global css file:

body {
  font-family: 'Vazir';
  background-image: url("assets/back.jpg");
  background-repeat: repeat-y;
  background-position: center;
  background-size: cover;
}

I defined another css file and link in index.html but it didn't work well.I have also set directly into body tag in index.html but I got same result.

PS: I don't want to set pixels or percentage in css file.

Thanks in advance

Answer 1

You can achieve it in the following way:

1-Define a router outlet in the root component (probably app.component.html)

<div class="outlet-wrapper">
    <router-outlet></router-outlet>
</div>

2- In the relative style file (app.component.css/scss), define:

.outlet-wrapper {
  background-image: url("assets/back.jpg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}