El problema que tienes es porque le asignas una imagen de fondo a un contenedor sin una altura determinada (recuerda que la medida `height: 100%;` te coge la altura total del padre).
Con cambiarle `height` por una medida en píxeles ya te debería correr sin problemas.

    .bg-img {
      width: 100%;
      height: 400px ; /* Antes 100%; */
      background-image: url("../img/primary.jpg");
      background-repeat: no-repeat;
      background-size: cover;
      background-color: gray;
    }

PD: Recordarte también que `background` prioriza la imagen antes que el color, con lo cual el fondo gris solamente te debería salir si tienes mal la URL de la imagen.