How to add Zig Zag Border to field contains background image

Question

I already found the following perfect CSS snippet that creates a zip zag border on this one.

.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; } 

As you can see, the code creates the border of the Persian zig zag, but I need to add this frame to the field containing the image as:

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

Could you help me mix them? I already tried several ways, but the image disappears when I mix them!

Answer 1

You can do this, but you need a disguise, and as far as I know, it is only available in the web kit.

 #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 a zigzag pattern; as well as the fact that the top of the image is also transparent. When we use this as a mask, it uses a background where it is transparent.

I set the body with the stripes pattern so that you can see that the zig zag border is really transparent.

demonstration

Answer 2

Problem

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

Solution [ Demo ]

You should use the CSS2 multi-page function 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*/ }