1

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

marc_s
  • 732,580
  • 175
  • 1,330
  • 1,459
Mousavi
  • 95
  • 7

1 Answers1

0

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;
}
Ran Turner
  • 14,906
  • 5
  • 47
  • 53
  • actually I dont have rounting in this project , It just consist of one component ( app.component) I followed your instruction but it didn't work . here is my index.html code :
    – Mousavi Jun 12 '21 at 12:58
  • Add height and width properties if that's the case – Ran Turner Jun 12 '21 at 13:22
  • 1
    you can add `min-height:100vh;min-width:100vw` – Eliseo Jun 13 '21 at 17:52
  • @Eliseo thanks, it's somehow works, But would you please explain more where to put this css statements, in global css or in appcomponent.css? thanks for your help – Mousavi Jun 14 '21 at 06:47