Can't get through CSS masking

Question

I'm trying to use CSS masking but can't figure out why is not working with this png.

Codepen

div {
  width: 100%;
  height: 500px;
  background-color: red;
  mask-image: url(https://wp.agriturismo-bien-etre.com/wp-content/uploads/2022/10/zig_mask.png);
  mask-repeat: repeat;
  mask-mode: alpha;
}

<div></div>

Answer 1

First you need to use -webkit- as the feature is still not a standard one then use another hosting for your image to avoid CORS security issue (Related imgur image not loading due to CORS policy)

div {
  width: 100%;
  height: 500px;
  background-color: red;
  -webkit-mask-image: url(https://i.ibb.co/zWgV96b/zig-mask.png);
  -webkit-mask-repeat: repeat;
}

<div></div>