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%;"height: 100%;
te coge la altura total del padre).
Con cambiarle el heightheight
por una medida en pixelespí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 el backgroundbackground
prioriza la imagen antes que el color, con lo cual el fondo gris solamente te debería salir si tienes mal la urlURL de la imagen.