sosori sosori - 1 month ago 14
CSS Question

Is there any order to cover the image of the img tag for the background image?

It was inserted into the background image to the class li.

Inside li class img tag has.

The background image on the li class tag, how do you occupy the top than that?

<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>

Answer

Use .first-img relative. See working example.

.wrap {
    width: 100%;
    overflow: hidden;
    position: relative;
    height: 625px;
}
.ul-wrap {
    width: auto;
    position: relative;
}

.ul-wrap li {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAQElEQVQoU2NkIAJ4e3sbMxJSB1K0devWs3gVwhSBDMOpEFkRToXoirAqxKYIQyEuRSgK8SmCKySkCKyQGEUghQBteCUf8jBb4wAAAABJRU5ErkJggg==);
  display: block; 
  position: relative;
  width: 980px;
  height: 625px;
  background-size: cover;
  background-color: rgba(255, 0, 0, 0.4);
}

.wrap img {
    max-width: 100%;
}

.first-img {
  position: relative;
  z-index: -1;
}
<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>