Using image in angular

Question

I have images stored in images folder inside assets folder

app 
  -app.component.css
assets
  -images
     -some-image.png

I'm trying to get the image in css inside background-image, but I think I have path related issues, since I can't seem to bring the image.

background-image:  url(../../../assets/images/some-image.png) no-repeat center top;

Help would be appreciated.

Answer 1

Try adding the style as following with a width and height. Also, isolate the background-repeat and background-position. It'd work.

  background-image:  url(../assets/images/some-image.png);
  background-repeat: no-repeat;
  background-position: center-top;
  width: 100%; // any width
  height: 230px; // any height

To make it look better you can add,

background-size: contain;

UPDATE:

The reason that the image doesn't show up without width and height, As default div is given a height of 0 since there are no inner elements. But, it has a default width of 100% already. Therefore, when we add an image using CSS background image property, we've to add the height attribute.

Answer 2

It should be just,

background-image:  url(../assets/images/some-image.png) no-repeat center top;