How to make background images to overlap each other in breadcrump

October 10, 2023

I am trying to make the frame of the breadcrump to overlap the inside images. I tried z-index -1 but it lets the images disapear. check the image attached to understand more. thanks

.breadcrumb {
    margin-bottom: 25px;
    margin-top: 0px;
    list-style: none;
    padding: 0;
    display: flex;
    justify-content: center;
    font-weight: bold !important;
    text-align: center !important;
    background-color: #ffffff;
}

.breadcrumb li {
  width: 181px;
  height: 140px;
  text-align: center !important;
  color: white !important;
  text-decoration: none;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  margin-left: -30px;

}

.breadcrumb li:nth-child(1),.breadcrumb li:nth-child(2),.breadcrumb li:nth-child(3),.breadcrumb li:nth-child(4),.breadcrumb li:nth-child(5),.breadcrumb li:nth-child(6),.breadcrumb li:nth-child(7),.breadcrumb li:nth-child(8),.breadcrumb li:nth-child(9) {
  background:  url(asset-path("light_gray.png")) no-repeat right !important;
  background-size: cover !important;
  z-index: 1;
}
.breadcrumb a, .breadcrumb a:link,.breadcrumb a:visited {
    color: white;
    margin: 10px 0px 115px 30px;
    font-size: 13px;
    white-space: nowrap;
}
.breadcrumb li img {
  width: 131px;
    position: absolute;
    left: 19%;
    top: 22%;
    height: 100%;
    clip-path: polygon(0% 0%, 0% 0%, 81% 0%, 108% 26%, 40% 100%, 0% 81%, 0% 0%, 0% 0%);
    }

col-md-12{
  border: 2px solid black;
  padding: 10px;
  margin: -10px;
}
strong{
  text-transform: uppercase;
}
.doctor{
  padding: 0px;
}
.patient{
  padding: 0px
}

.breadcrumb > li + li:before {
    content: "  " !important;

}

.border{
  width: 100%
}

li .shadow, li .blue, li .orange, li .gray,  li .green {
  color: white !important;
}
}
 .left{
  border-left-color: #fe4e2d !important;
 }

    <ul class="breadcrumb">
            <li> <a class=" " href="/steptations?case_id=400&amp;doctor_id=19&amp;product_id=4&amp;step_id=1">Conception</a>
                      <a href="/steptations?case_id=400&amp;doctor_id=19&amp;product_id=4&amp;step_id=1"><img title="" src="//mobileimplantlab.s3.amazonaws.com/step_images/image1s/000/002/739/original/5EDAD5D1-E621-4DAF-BB33-C17554246FDA.jpeg?1679639265" alt="5edad5d1 e621 4daf bb33 c17554246fda">
    </a>            </li><li> <a class=" " href="/steptations?case_id=400&amp;doctor_id=19&amp;product_id=4&amp;step_id=2">Jig/BB/CT</a>
                </li><li> <a class=" " href="/steptations?case_id=400&amp;doctor_id=19&amp;product_id=4&amp;step_id=3">Pour/Mount</a>
                      <a href="/steptations?case_id=400&amp;doctor_id=19&amp;product_id=4&amp;step_id=3"><img title="" src="//mobileimplantlab.s3.amazonaws.com/step_images/image1s/000/002/783/original/image.jpg?1681598393" alt="Image">
    </a>            </li><li> <a class=" " href="/steptations?case_id=400&amp;doctor_id=19&amp;product_id=4&amp;step_id=4">Teeth set up</a>
                      <a href="/steptations?case_id=400&amp;doctor_id=19&amp;product_id=4&amp;step_id=4"><img title="" src="//mobileimplantlab.s3.amazonaws.com/step_images/image1s/000/002/784/original/image.jpg?1681598836" alt="Image">
    </a>            </li><li> <a class=" " href="/steptations?case_id=400&amp;doctor_id=19&amp;product_id=4&amp;step_id=10">Bar milling</a>
                      <a href="/steptations?case_id=400&amp;doctor_id=19&amp;product_id=4&amp;step_id=10"><img title="" src="//mobileimplantlab.s3.amazonaws.com/step_images/image1s/000/002/781/original/image.jpg?1681512121" alt="Image">
    </a>            </li><li> <a class=" " href="/steptations?case_id=400&amp;doctor_id=19&amp;product_id=4&amp;step_id=11">Finalization</a>
                      <a href="/steptations?case_id=400&amp;doctor_id=19&amp;product_id=4&amp;step_id=11"><img title="" src="//mobileimplantlab.s3.amazonaws.com/step_images/image1s/000/002/816/original/CB1E55D8-9D9E-42F3-96EA-3C4486D9FCEF.jpeg?1682993428" alt="Cb1e55d8 9d9e 42f3 96ea 3c4486d9fcef">
    </a>            </li><li style="background: url(/assets/gray.png) no-repeat right !important; background-size: cover !important;"> <a class="gray " href="/steptations?case_id=400&amp;doctor_id=19&amp;product_id=4&amp;step_id=13">Shipped </a>
                      <a href="/steptations?case_id=400&amp;doctor_id=19&amp;product_id=4&amp;step_id=13"><img title="" src="//mobileimplantlab.s3.amazonaws.com/step_images/image1s/000/002/817/original/455D15CB-9C78-40B7-A3D6-9E710565CCC4.jpeg?1682993522" alt="455d15cb 9c78 40b7 a3d6 9e710565ccc4">
    </a>    </li></ul>

>Solution :

Using z-index: -1; will hide it because the image "disappears" behind the element. You need to give all the list <li> elements a z-index that decreases the more elements there are. So you would go from element1 = z-index: 10;, element2 = z-index: 9; and so on.

This could be solved with javascript, so that you don’t have to do this manually:

.breadcrumb li:nth-child(1){ z-index: 10 !important; }
.breadcrumb li:nth-child(2){ z-index: 9  !important; }
.breadcrumb li:nth-child(3){ z-index: 8  !important; }
.breadcrumb li:nth-child(4){ z-index: 7  !important; }
.breadcrumb li:nth-child(5){ z-index: 6  !important; }
.breadcrumb li:nth-child(6){ z-index: 5  !important; }
.breadcrumb li:nth-child(5){ z-index: 4  !important; }

Here is a javascript snippet that should do that for you automatically:

// Get all the .breadcrumb elements
const breadcrumbs = document.querySelectorAll('.breadcrumb li');

// Loop through the breadcrumbs and set the z-index
breadcrumbs.forEach((item, index) => {

    // Calculate the z-index value by subtracting the index from the total number of crumbs
    const z = breadcrumbs.length - index;
  
    // Set the z-index value using inline style
    item.style.zIndex = z;
});