div mit schräger kante

hi zsm,

ich versuche einen div container mit schräger unterkante einzubinden. dieser soll eine hintergrundgrafik haben die beim scrollen der seite mitscrollt. habe das jetzt schon vermehrt gesehen und finde das ist ein schöner effekt. das ganze sieht dann so aus:

bin auf der suche diesbezüglich über folgenden code gestolpert:

css:

.diagonal-shape.bl-to-tr {
  height: 0;
  border-style: solid;
  border-width: 300px 0 50px 100vw;
  border-color: transparent #fff #fff transparent;
}

html:

<div class="diagonal-shape bl-to-tr"  style="background-image:url(images/BirkenimLicht.jpg); background-size: cover; background-repeat: no-repeat; background-attachment:fixed;"></div>

funktioniert soweit auch und wird wie im bild dargestellt angezeigt. allerdings nicht auf mobilen endgeräten
wo liegt der fehler?
bzw wie kann ich dies realisiern?
was muss ich ändern?
oder gibt es noch eine andere möglichkeit?

danke schonmal