Я создаю тестовый сайт с Angular, просто чтобы узнать некоторые вещи. Сначала я помещаю все в индекс. html, и вот такой взгляд я придумал:

index. html:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Reiche Freunde</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<a href="http://google.com">
<p style="text-align: center; margin-top: 15%;"><img src="assets/Mony.gif" /></p>
</a>
</body>
</html>
Затем я скопировал этот код html и ввел его в app.component. html. Вернувшись в индекс. html, я изменил
<body style="background-image: url('assets/geld.jpg');">
<a href="http://google.com">
<p style="text-align: center; margin-top: 15%;"><img src="assets/Mony.gif" /></p>
</a>
</body>
на
<body>
<app-root></app-root>
</body>
Но тогда мой сайт начал выглядеть так:

Где я сделал ошибку? Мой app.component. css пуст, поэтому ничто не может изменить внешний вид этого фона. Я не вижу никакой связи между абзацем и самим телом, но фон все еще относительно моей долларовой банкноты. Когда я помещаю это в app.component. css:
body {
position: absolute;
}
, тогда я получаю это:

Я только начинающий в html / css, но все уроки по фоновым изображениям ничего не изменили для меня