search

sunmingtao / sample-code

3 stars 4 forks source link

Why Div with background image has no height and doesn't display? #121

Closed sunmingtao closed 4 years ago

sunmingtao commented 4 years ago

html

<div class="book"></div>

css

.book {
    background-image: url('../img/nat-10.jpg');
    background-size: cover;
    //height: 50rem;
}

Without the height attribute, nothing displays. Inspect the element, the height of the div is 0.

sunmingtao commented 4 years ago

This is because the div doesn't have any contents, so the height is 0. Add some contents and see the difference. e.g. <div class="book">Add some contents</div>