The li class has a background image inserted into it.
Inside the li class, there is an img tag.
How can you make the background image of the li class tag take up more space than the top?
<style>
.wrap {
width: 100%;
overflow: hidden;
position: relative;
height: 625px;
}
.ul-wrap {
width: auto;
position: relative;
}
li.full-image.guest_bulr {
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAQElEQVQoU2NkIAJ4e3sbMxJSB1K0devWs3gVwhSBDMOpEFkRToXoirAqxKYIQyEuRSgK8SmCKySkCKyQGEUghQBteCUf8jBb4wAAAABJRU5ErkJggg==);
position: absolute;
top: 0;
bottom: 0;
right: 0;
width: 980px;
height: 625px;
z-index: 999;
display: none;
background-color: rgba(21, 18, 18, 0.9);
zoom: 1;
background-size: cover;
}
.wrap img {
max-width: 100%;
display: block;
}
</style>
<div class="wrap">
<ul class="ul-wrap">
<li>
<img src="http://placehold.it/980x625/?text=image-1st" alt="image" class="first-img">
</li>
</ul>
</div>