<div class="wrapper"><div class="holes"></div></div>

.holes {
  width: 560px;
  height: 360px;
  opacity: .3;
  background-image:
    linear-gradient(180deg, black 60%, transparent 60%),
    linear-gradient(90deg, black 60%, transparent 60%);
  background-size:100px 100px;
}


.wrapper {
  width: 600px;
  height: 400px;
background-image: url(https://images.unsplash.com/photo-1496824000084-3b2dc58685d4?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=600&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ);
  padding: 20px;
  box-sizing: border-box;
}