Background image in diagonal div clip-path

Question

I managed to do so with solid color background

.slide {
	width: 100%;
	height: 101px;
  background-color: #fff;
  background-size: cover;
  clip-path: polygon(50% 100%, 100% 0%, 0% 0%);
}
.slide_bg{
  background-color: #f5f5f5;
  padding-bottom:20px;
   padding-left:20px;
  }
.slide_end {
	width: 100%;
	height: 101px;
  background-color:#f5f5f5;
  background-size: cover;
  clip-path: polygon(50% 100%, 100% 0%, 0% 0%);
}

.slide_end_bg {
	width: 100%;
	
  background-color:#fff;
  
}

<div class="slide_bg">

<p>
asdasdasd
</p>
<p>
asdasdasd
</p>
<p>
asdasdasd
</p>
</div>

<div class="slide_end_bg">
<div class="slide_end">
  
</div>
</div>

How can I put an image as background in a div with the clip-path diagonally?

Answer 1

Face the way you rode your html/css you will not get, for you have an element where you put the text and another where you put the clip-path, you need to be all one element with just the text and the bg taking the clip-path whole.

Its structure was this way, but it needs to be all one element... There’s no way you can get the BG to go from the green element to the red, you have to join them in one clip-path single

Follow an example correcting this.

You will see that I gave up a simplified code to be able to work. I put the clip-path in the same element that will have the dendrous text and used a background-image and it was all right

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}
.slide_bg {
  padding-top: 0.75em;
  padding-bottom: 6em;
  box-sizing: border-box;
  padding-left: 20px;
  background-image: url(http://placecage.com/620/380);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  -webkit-clip-path: polygon(100% 0, 100% 70%, 50% 100%, 0 70%, 0 0);
  clip-path: polygon(100% 0, 100% 70%, 50% 100%, 0 70%, 0 0);
  margin-bottom: 2rem;
}
.slide_bg:nth-child(2) {
  background-image: url(http://placecage.com/620/383);
}

<div class="slide_bg">
    <p>
        asdasdasd
    </p>
    <p>
        asdasdasd
    </p>
    <p>
        asdasdasd
    </p>
</div>

<div class="slide_bg">
    <div>
        asdasdasd
    </div>
    <p>
        asdasdasd
    </p>
    <span>
        asdasdasd
    </span>
</div>