css - 背景画像を含むボックスにジグザグボーダーを追加する方法

Question

このリンクで、zip zag ボーダーを作成する次の完璧な CSS スニペットを既に見つけています。

.h-zigzag {
    background:
        linear-gradient(-135deg, #333538 5px, transparent 0) 0 5px,
        linear-gradient(135deg, #333538 5px, #fff 0) 0 5px;
    background-color: #333538;
    background-position: left bottom;
    background-repeat: repeat-x;
    background-size: 10px 10px;
}

ご覧のとおり、コードは完璧なジグザグの境界線を作成しますが、この境界線を画像を含むボックスに次のように追加する必要があります。

 .h-zigzag {
   background: url(../img/grrenfooter.png) repeat-x top left scroll transparent;
 }

それらを混ぜるのを手伝ってくれませんか？すでにいくつかの方法を試しましたが、それらを混ぜると画像が消えます!