z index is not working on image while using clip path on header element

Question

this is the screen shot of my problem.Thanks for this community to give me opportunity to have my problem to be solve, as I am facing problem in header section that my statistics image is not appearing on top of header (clip path). I need this image on top of clip path. I have searched a lot but nothing solve my problem. Plz look at this code and I have also attached screenshot to have you better idea what I am looking for. Thanks in advance

.header {
  background: linear-gradient(to right bottom, rgba($color-black, .85), rgba($color-black, .85)), url(../img/background.jpg);
  background-size: cover;
  background-position: center;
  height: 95vh;
  clip-path: polygon(0 0, 100% 0, 100% 15%, 60% 100%, 0 100%);
  z-index: -10;
  &__navigation {
    background-color: $color-secondary;
  }
  &__flex {
    display: flex;
    align-items: flex-end;
  }
  &__textbox {
    flex: 0 0 50%;
    padding: 20vh 5vw 0 0;
    &--text {
      font-size: 1.6rem;
      margin-bottom: 4rem;
      color: $color-light;
    }
  }
  &__photo {
    flex: 1;
    z-index: 10;
    &--img {
      display: block;
      z-index: 10;
    }
  }
}

<!-- ================================= Header starts here ===========================-->
<header class="header" id="header">
  <div class="header__navigation">
    <div class="row">
      <!-- ============= Navigation starts =============-->
      <nav class="nav">
        <a href="#home" class="logo">Olivlian</a>
        <ul class="nav__list js--nav__list">
          <li class="nav__item">
            <a href="#home" class="nav__link">Home</a>
          </li>
          <li class="nav__item">
            <a href="#watch" class="nav__link">About</a>
          </li>
          <li class="nav__item">
            <a href="#feature" class="nav__link">Manufacturing</a>
          </li>
          <li class="nav__item">
            <a href="#product" class="nav__link">Packaging</a>
          </li>
          <li class="nav__item">
            <a href="#testimonial" class="nav__link">Forms</a>
          </li>
          <li class="nav__item">
            <a href="#" class="nav__link btn btn__primary">Buy Now</a>
          </li>
        </ul>
        <a href="#" class="icon__menu"><i class="fas fa-bars js--menu"></i></a>
      </nav>
      <!-- ============= Navigation Ends =============-->
    </div>
  </div>
  <div class="row">
    <div class="header__flex">
      <div class="header__textbox header__textbox--1">
        <h1 class="heading-primary">
          a vegan diet
        </h1>
        <p class="header__textbox--text">
          Olive oil is a liquid fat obtained from olives, a traditional tree crop of the Mediterranian Basin, produced by pressing whole olives and extracting the oil. It is commonly used in cooking, for frying foods or as a salad dressing.
        </p>
        <a href="#" class="btn btn__primary">add to cart</a>
        <a href="#" class="btn btn__light">book a table</a>
      </div>
      <div class="header__photo">
        <img src="img/6.jpg" alt="statistics" class="header__photo--img">
      </div>
    </div>
  </div>
</header>

I can't see a screenshot. Could you put one up as that would certainly help. Are you saying that you want some of the background to the header clipped (perhaps the linear gradients?) but the actual image should not be clipped at all? — A Haworth, Oct 17 '21 at 19:38
Hy thanks A Haworth. I have posted a link of my sreen shot. I need my statistics image on top of clip path (header section) — hussain shah, Oct 17 '21 at 19:45

A Haworth · Accepted Answer · 2021-10-17T20:32:47.903

Thanks for the clarification.

You need to not clip the actual header element as that will clip everything within it.

Instead you can add a before pseudo element to the header which has the background and clip that. Then all the children of the header will remain unclipped so your statistics image will show.

Here's a simplified snippet to show the idea:

/*================================== Header Starts Here =====================================*/

.header {
  position: relative;
  height: 95vh;
  width: 100vw;
}

.header::before {
  content: '';
  background-image: linear-gradient(rgba(0, 0, 0, .85), rgba(0, 0, 0, .85)), url(https://picsum.photos/id/1016/300/200);
  background-size: cover;
  background-position: center;
  height: 95vh;
  width: 100vw;
  clip-path: polygon(0 0, 100% 0, 100% 15%, 60% 100%, 0 100%);
  z-index: -1;
  position: absolute;
  top: 0;
  left: 0;
  display: inline-block;
}

header__navigation {
  background-color: pink;
}

.header__flex {
  display: flex;
  align-items: flex-end;
}

.header__textbox {
  flex: 0 0 50%;
  padding: 20vh 5vw 0 0;
}

.header__textbox--text {
  font-size: 1.6rem;
  margin-bottom: 4rem;
  color: lightblue;
}

.header__photo {
  flex: 1;
  z-index: 10;
}

.header__photo--img {
  display: block;
  z-index: 10;
}

<!-- ================================= Header starts here ===========================-->
<header class="header" id="header">
  <div class="header__navigation">
    <div class="row">
      <!-- ============= Navigation starts =============-->
      <nav class="nav">
        <a href="#home" class="logo">Olivlian</a>
        <ul class="nav__list js--nav__list">
          <li class="nav__item">
            <a href="#home" class="nav__link">Home</a>
          </li>
          <li class="nav__item">
            <a href="#watch" class="nav__link">About</a>
          </li>
          <li class="nav__item">
            <a href="#feature" class="nav__link">Manufacturing</a>
          </li>
          <li class="nav__item">
            <a href="#product" class="nav__link">Packaging</a>
          </li>
          <li class="nav__item">
            <a href="#testimonial" class="nav__link">Forms</a>
          </li>
          <li class="nav__item">
            <a href="#" class="nav__link btn btn__primary">Buy Now</a>
          </li>
        </ul>
        <a href="#" class="icon__menu"><i class="fas fa-bars js--menu"></i></a>
      </nav>
      <!-- ============= Navigation Ends =============-->
    </div>
  </div>
  <div class="row">
    <div class="header__flex">
      <div class="header__textbox header__textbox--1">
        <h1 class="heading-primary">
          a vegan diet
        </h1>
        <p class="header__textbox--text">
          Olive oil is a liquid fat obtained from olives, a traditional tree crop of the Mediterranian Basin, produced by pressing whole olives and extracting the oil. It is commonly used in cooking, for frying foods or as a salad dressing.
        </p>
        <a href="#" class="btn btn__primary">add to cart</a>
        <a href="#" class="btn btn__light">book a table</a>
      </div>
      <div class="header__photo">
        <img src="https://picsum.photos/id/1015/300/300" alt="statistics" class="header__photo--img">
      </div>
    </div>
  </div>
</header>

Thanks very very much A Haworth, your code resolves my issue. Bundle of best wishes for you. Regards — hussain shah, Oct 18 '21 at 18:05

z index is not working on image while using clip path on header element

1 Answers1