如何将 Angular 应用程序的背景设置为图像？

Question

In my app.component.css I have

.container{
    background-image: url(/image.jpg);
}

and in app.component.html I have

<div class="container">
    <h1>image</h1>
</div>

I am confused with this is not working. Is there a better way to set a background image for the app?

Answer 1

Demo you should also set its width and height

.container{
    background-image: url(/image.jpg);
    width:100%;
    height:100%;
    background-repeat: no-repeat;
    background-size: cover;
}

and you also set html and boys width and height too in styles.css

html,body{
  width:100%;
  height: 100%;
  margin:0 auto;
}

Answer 2

I created a sample on Stackblitz for you

Try using background like this:

app.component.css

.img {
  background: url(imgage-url-address-here);
  height: 480px;
}

app.component.html

<p class="img">
  Start editing to see some magic happen :)
</p>