Background image does not render within div element-CodePudding

I cannot seem to get this background image to render within my Angular component.

html

 <div ></div>

scss

.bkg {
  width: 100%;
  height: 100%;
  background-image: url("../../../assets/welcome-pic.png");
  background-size: 100% 100%;
  background-position: top center;
 }

I can see it in chrome dev tools. There is nothing wrong with the path, it loads fine. It just does not display in the UI.

Any ideas what could be wrong here?

CodePudding user response：

You are putting a background image on empty div's content, so nothing will be displayed. At least put that div inside parent div and give parent's div height and width.

CodePudding user response：

What worked, in the end, was making sure parent divs or body are given dimensions. Otherwise, nothing renders.

.bkg {
 width: 100%;
 height: 100%;
 background-image: url("~src/assets/welcome-pic-2.png");
 background-size: 100% 100%;
}

.container {
  width: 100%;
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
  height: 100%;
}

Or add dimension to body if no container.

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

This resource helped. div height full screen