Why background image not showing in html div-CodePudding

I am trying to create a div with a background-image, but the image is not showing. If I set the height in pixels (px) not percentage(%), the image is shown. So, I suspect there is no height set before. But I've set the html body height and width.

The code is below:

html {
  height: 100%;
  width: 100%
}

body {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
}

<div  style="height:100%">
  <div  style="width:50%;background-image:URL('https://images.unsplash.com/photo-1491884662610-dfcd28f30cfb?ixlib=rb-1.2.1&amp;ixid=MnwxMjA3fDB8MHxzZWFyY2h8NHx8amFwYW5lc2V8ZW58MHx8MHx8&amp;w=1000&amp;q=80')">

  </div>
  <div  style="width:50%; background-color:#00000"></div>
</div>

I think there's nothing wrong with it? Are there any mistakes I made?

EDIT:

I already added background-size and background-repeat.

CodePudding user response：

Your expectations are wrong. The height of div (and other block-level elements) is determined by its content.

Since both of your inner div elements have no content other than whitespace (a background-image is not content), their height resolves to 0.

To fix it, assign a height to the divs.

Please start using the element inspector in your browser's developer tools (F12 on Windows).

CodePudding user response：

first background-image:url() second you didnt set height of that image.`

.leftdisp {
  height: 300px;
}

<div  style="height:100%">
  <div  style="width:50%;background-image:url('https://images.unsplash.com/photo-1491884662610-dfcd28f30cfb?ixlib=rb-1.2.1&amp;ixid=MnwxMjA3fDB8MHxzZWFyY2h8NHx8amFwYW5lc2V8ZW58MHx8MHx8&amp;w=1000&amp;q=80')">

  </div>
  <div  style="width:50%; background-color:#00000"></div>
</div>

CodePudding user response：

Please add min-height property on leftdisp div

Just replace this code

 <body>
    <div  style="height:100%">
        <div  style="width:50%; min-height: 500px; background-image:URL('https://images.unsplash.com/photo-1491884662610-dfcd28f30cfb?ixlib=rb-1.2.1&amp;ixid=MnwxMjA3fDB8MHxzZWFyY2h8NHx8amFwYW5lc2V8ZW58MHx8MHx8&amp;w=1000&amp;q=80')">
        
        </div>
        <div  style="width:50%; background-color:#00000"></div>
    </div>
</body>

CodePudding user response：

if you want to set image to background, do it in body tag.

<body style="width:50%;background-image:url('https://images.unsplash.com/photo-1491884662610-dfcd28f30cfb?ixlib=rb-1.2.1&amp;ixid=MnwxMjA3fDB8MHxzZWFyY2h8NHx8amFwYW5lc2V8ZW58MHx8MHx8&amp;w=1000&amp;q=80')">
    <div  style="height:100%">
        <div >
        
        </div>
        <div  style="width:50%; background-color:#00000"></div>
    </div>
</body