Как задать SVG clip-path в качестве фона?

Question

[MyNamee]

Привет, очень прошу помощи. Как изображение svg clip-path задать в качестве фона для header?
Извиняюсь если вопрос глупый, я новичок, дал ссылку на песочницу - уверен там будет понятнее. Очень надеюсь на помощь и правильный код.
Ссылка на JSFiddle

Comments

[ProjectSoft]

Зачем вообще здесь clip-path?

[MyNamee]

ProjectSoft, Чтобы реализовать кривой срез внизу

[ProjectSoft]

Это будет неадаптивно.
Что мешает на изображении сделать срез?

[MyNamee]

ProjectSoft, Поддержка сайта обычным пользователем, который в случае смены изображения фона вынужден будет делать также и на изображении срез
Т.е адаптивно прикрутить невозможно?

[ProjectSoft]

Ну так сделайте вот это белый срез в png и накладывайте двойным бакгроундом.

.header {
	background-image:  url("image.jpg"), url("clip.png");  
	background-position: 50% 50%, bottom 50%;
	background-repeat: no-repeat, no-repeat;
	background-size: cover, cover;
}

C clip-path адаптивно не получится

[MyNamee]

ProjectSoft, Спасибо большое, я попробую

[Ankhena]

MyNamee, лучше только clip.svg

Answer 1

[Максим]

https://jsfiddle.net/8mtqrzbk/10/ примерно так - дальше по шагам - адаптировать текст - так как само svg резиновое - если что то не ясно спрашивайте

проверял в Chrome Firefox IE11 EDGE - работает везде