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