为Angular项目设置完整背景

Question

我尝试了很多次并搜索了很多关于如何在 angular 项目中为整个应用程序设置图像背景的信息。

我尝试了全局 css 和 app.component.css 但它只是为组件区域设置了背景。

这是我的全局 css 文件：

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

我定义了另一个 css 文件并在 index.html 中链接，但效果不佳。我还直接在 index.html 中设置了正文标签，但我得到了相同的结果。

PS：我不想在 css 文件中设置像素或百分比。

提前致谢

Answer 1

您可以通过以下方式实现它：

1-在根组件中定义一个路由器出口（可能是app.component.html）

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

2- 在相关样式文件 (app.component.css/scss) 中，定义：

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