background image is not being displayed in div

Question

I am working in angular 5 project using VS Code. I am unable to get image on display but it is being download because it is in the network tab in developer tool of chrome browser. This means url is right.

.start {
    background: #222 url('/assets/images/Untitled-1.png') center center no-repeat;
    color: white;
    height: 100%;
    text-align: center;
}

Now added width and height to the parent div, still no image on display ;(

<div class="row">
  <div class="col" style="height:100%;width:100%;">
    <div class="start"></div>
  </div>
</div>

It is downloaded but not being displayed. Where did I mistake?

I am following that YouTube tutorial

height:100% --> height:0 : no content inside the div and no height specfied to the parent element — Temani Afif, Feb 01 '18 at 11:04
also a typo mistake `background: #222 url('/assets/images/Untitled-1.png') center center no-repeat;` missing a `,` — Temani Afif, Feb 01 '18 at 11:06
There's no Angular content there. Post you Angular code, or remove the tag ! — , Feb 01 '18 at 11:08

score 0 · Accepted Answer · answered Feb 01 '18 at 11:15

0

If you are using background property to set an image you need to have content inside that will increase elements height or set a specific height yourself.

answered Feb 01 '18 at 11:15

zmuci

518
1
5
21

look now, I have added width and height to the parent div – Feb 01 '18 at 11:16
@mwn you added height:100% to parent and the same logic apply, no height for its parent so height will be auto and nothing will happen – Temani Afif Feb 01 '18 at 11:18
@mwn you can't use percentage based heights if there is not content. You need to use some of the specific units. px, em, rem, wv, wh etc.. You can't set % – zmuci Feb 01 '18 at 11:19
@NikolaDragan no he CAN use % BUT % will refer to parent height so parent height need to be set – Temani Afif Feb 01 '18 at 11:20
@TemaniAfif not in the example he is showing. I know you can use it if the parent has it set, but it doesn't seem like it in his example. – zmuci Feb 01 '18 at 11:21
1

it works, I've added some html elements to the div which is setting background image – Feb 01 '18 at 11:23
because he didn't set a height .. he set a height of 100% to parent and the logic is the same for the parent because its parent has also no height set. So doing a cascading 100% height will work only if we have the first one with a height set or we reach the document element – Temani Afif Feb 01 '18 at 11:26
please guys, upvote so that I can get some privileges and advantages on this site. right now I can not even upvote to this answer ;(. Thanks for your input – Feb 01 '18 at 11:34

background image is not being displayed in div

1 Answers1