.hero-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(to right, rgba(220,220,220,0.3) 1px, transparent 1px),
                    linear-gradient(to bottom, rgba(220,220,220,0.3) 1px, transparent 1px);
  background-size: 50px 50px;
  z-index: 0; /* чтобы текст был поверх */
}