How to make background images to overlap each other in breadcrump

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%);

  border: 2px solid black;
  padding: 10px;
  margin: -10px;
  text-transform: uppercase;
  padding: 0px;
  padding: 0px

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


  width: 100%

li .shadow, li .blue, li .orange, li .gray,  li .green {
  color: white !important;
  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="//" 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="//" 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="//" 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="//" 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="//" 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="//" alt="455d15cb 9c78 40b7 a3d6 9e710565ccc4">
    </a>    </li></ul>

enter image description here

>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 = z;

Leave a Reply