How To Add Zig Zag Border to a Box contains background image

Question

I already find following perfect CSS snippet which creates zip zag border at this link.

.h-zigzag {
    background:
        linear-gradient(-135deg, #33353         


        

Answer 1

You can do that, but you need masking, and as far as I know it is only available in webkit.

#zigzag {
    width: 600px;
    height: 400px;
    -webkit-mask-image: linear-gradient(0deg, transparent 30px, white 30px), linear-gradient(-135deg, white 15px, transparent 15px), linear-gradient(135deg, white 15px, transparent 15px);
    -webkit-mask-position: left bottom;
    -webkit-mask-repeat: repeat-x;
    -webkit-mask-size: 100% 100%, 30px 30px, 30px 30px;
    background: url("http://placekitten.com/1000/750");
    background-size: cover;
}

body {
    background-image:  repeating-linear-gradient(20deg, lightgreen, lavender 40px);   
}

<div id="zigzag"></div>

This works by creating an image that has the zigzag pattern ; and also that has the upper part of the image also transparent. When we use that as a mask, it uses the background where it is transparent.

I have set the body with a stripes pattern so that it can be seen that the zig zag border is really transparent

demo

Answer 2

Problem

You can't mix them, because both of them use the background property, so the last CSS code will be applied because it overrides the previous one(s).

Solution [Demo]

You have to use CSS2 multiple background feature and set the background-size individually:

.h-zigzag {
   height:200px;/*Set this to match with your background image*/
   width:200px;/*Set this to match with your background image*/
   background:
      linear-gradient(-135deg, #333538 5px, transparent 0) 0 5px,
      linear-gradient(135deg, #333538 5px, #fff 0) 0 5px,
      url('http://placekitten.com/200/200');/*Your image URL here*/       
   background-color: #333538;
   background-position: left bottom, left bottom, top;
   background-repeat: repeat-x;
   background-size:
      10px 10px,
      10px 10px,
      100% 100%;/*Your image size here*/
}